html,
body,
#app {
  width: 100%;
  height: 100%;
}

#app {
  overflow-y: auto;
}

body {
  overflow-y: hidden;
  background-color: #f7f7f7;
  min-width: 1200px;
  // font-family: "Microsoft YaHei";
  font-family: "Arial", "Microsoft YaHei", "PingFang SC";
  // font-family: "Times New Roman","Microsoft YaHei",'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
  color: #363636;
  // -webkit-font-smoothing: antialiased;
}

img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

@media print {
  body {
    background-color: #fff;
    min-width: auto;
  }

  .print-test {
    width: 100%;
    // width: auto;
    display: table;
    box-sizing: border-box;

    &.general-test {
      font-size: 20px;

      .test-title {
        font-size: 26px;
      }

      .test-name {
        font-size: 20px;
      }

      .question-type-container {
        .type-title {
          font-size: 22px;
        }
      }
    }
  }
}

.home-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align: center;
  background: #232422;
  height: 47px;
  font-size: 12px;
  color: #787878;
}

.home {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  user-select: none;

  .container {
    flex: 1;
    min-height: 100%;
    position: relative;

    // padding: 60px 40px;
  }

  .homeHeaderHeight {
    height: 0.515625rem !important;
  }

  .home-header {
    &.tran-bg-header {
      background: rgba(255, 255, 255, 0.12);
    }

    .el-dropdown {
      color: #fff;
    }

    .header-center {
      color: #5C5D5E;

      .el-dropdown {
        color: #5C5D5E;
      }
    }

    width: 100%;
    // 头部背景
    // background: $color-main;
    background:#EC7B32;
    height: 60px;
    color: #fff;

    .test-btn {
      display: flex;
      align-items: center;
      justify-content: center;

      .button {
        width: auto;
        padding: 0 24px;
      }

      .btn-bg {
        background-color: #fff;
        display: block;
        border-radius: 4px;
      }
    }

    .header-container {
      //   width: 1200px;
      margin: 0 auto;
      height: 100%;
    }

    .header-left {
      display: flex;
      //   vertical-align: center;
      align-items: center;

      .logo {}
    }

    .header-center {
      padding-right: 100px;
      flex: 1;
      font-size: 16px;
      display: flex;
      align-items: center;
      // justify-content: center;
      justify-content: space-around;

      .el-dropdown-link {
        font-size: 16px;
      }
    }

    .study-weight-title {
      background: linear-gradient(-50deg, #FD542E 0%, #EF981B 97%);
      border-radius: 2px;
    }

    .weight-title {
      line-height: 34px;
      padding: 0 10px;
      height: 34px;

      font-size: 16px;
      // font-weight: 400;
      color: #fff;
      position: relative;

      .el-dropdown {
        color: #fff;
      }
    }

    .header-right {
      display: flex;
      //   vertical-align: center;
      align-items: center;
      cursor: pointer;

      .header-icon-box {
        // display: flex;
        // align-items: center;
        vertical-align: middle;

        img {
          vertical-align: text-bottom;
        }
      }

      .avatar {
        display: flex;
        align-items: center;
        color: #0e0d0d;
        vertical-align: middle;
        font-size: 24px;

        .avatar-box {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60px;
          height: 60px;
          margin-right: 10px;
          // padding-left: 5px;
          background: rgba(212, 212, 212, 0.39);
          border-radius: 50%;
        }

        .el-avatar {
          vertical-align: middle;

          i {
            font-size: 40px;
            margin-right: -4px;
            margin-top: 4px;
          }
        }

        .avatar-default {
          height: 0.260416rem !important;
          width: 0.260416rem !important;
          line-height: 0.260416rem !important;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .avatar-right {
          font-size: 20px;

          .block {
            margin-top: 2px;
            color: #ffff;
            font-size: 14px;
            text-align: center;
            line-height: 20px;
            width: 50px;
            height: 20px;
            background: linear-gradient(-50deg, #fd542e 0%, #ef981b 97%);
            box-shadow: 0px 1px 18px 0px rgba(2, 4, 4, 0.15);
            border-radius: 4px;
          }
        }
      }
    }

    .index-user {
      font-size: 14px;

      img {
        width: 15px;
        height: 15px;
      }
    }

    .btn {
      color: #fff;
      height: 40px;
      cursor: pointer;
      border-radius: 4px;
      line-height: 40px;
      padding: 0 24px;
      font-size: 14px;
    }

    .btn:hover {
      background: rgba($color: #fff, $alpha: 0.2);
      color: #f7f7f7;
    }

    .close-memeory {
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      line-height: 20px;
    }
  }

  .study-contain {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.study-reminder-dialog {
  .el-dialog {
    position: relative;

    .el-dialog__header {
      // display: none;
      height: 0;
      padding: 0;
      overflow: hidden;

      .el-dialog__headerbtn {
        display: inline-block;
        position: absolute;
        top: 5px;
        right: -30px;

        i {
          color: #fff;
          font-weight: bold;
          font-size: 16px;
        }
      }
    }

    .el-dialog__body {
      background: #ffffff;
      border-radius: 12px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .text {
        position: absolute;
        right: 30px;
        top: 30px;
      }
    }
  }
}

.select-box {
  position: absolute;
  background: #ffffff;
  border: 1px solid #e5e5e5;

  li {
    // padding: 5px 10px;
    width: fit-content;
    color: #363636;
    font-size: 14px;
  }
}

.study-schedule-info {
  p {
    margin: 10px 0;
  }
}

.study-schedule {
  display: flex;
  align-items: center;

  .el-progress-circle {
    width: 0.0625rem !important;
    height: 0.0625rem !important;
  }

  .schedule-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    margin: 2px;
    margin-right: 3px;
  }

  &>.schedule-icon:nth-child(4n) {
    margin-right: 0;
  }

  .study-nolearn {
    border: 2px solid #cccccc;
  }

  .study-learning {
    padding: 0;
    // width: 16px;
    // height: 16px;
    // margin: 0;
  }

  .study-quick {
    background: url(../img/icon/study-quick.png) center center;
  }

  .study-pass {
    background: url(../img//icon/study-pass.png) center center;
  }

  .study-nopass {
    background: url(../img//icon/study-nopass.png) center center;
  }

  .study-ultimate {
    background: url(../img//icon/study-ultimate.png) center center;
  }

  .my_progress {
    display: flex;
    align-items: center;
    justify-content: center;

    .el-progress-circle {
      svg>path:first-child {
        stroke: #ccc;
      }
    }
  }
}

.study-center {
  .class-name {
    background: #fff;
    height: 100px;
    margin: 30px 0 20px 0;
    border-radius: 12px;
    // padding: 20px;
    box-sizing: border-box;
    align-items: center;

    >div {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .class-name-right {
      flex: 1;
    }

    .book-name {
      font-size: 24px;
      font-weight: bold;
      color: #363636;
    }

    .progress-box {
      flex: 1;
    }

    .progress {
      width: 260px;
      padding: 10px 0;
      cursor: pointer;
      position: relative;

      .el-progress-bar__outer {
        height: 0.03125rem !important;
      }

      .progress-text {
        color: #6b6b6b;

        i {
          color: #949494;
        }
      }

      .progress-absolute {
        position: absolute;
        display: none;
        width: 600px;
        background: #ffffff;
        border: 1px solid $color-main;
        box-shadow: 0px 3px 8px 0px rgba(21, 198, 59, 0.16);
        border-radius: 8px;
        z-index: 999;
        left: -200px;
        top: -10px;
        margin-top: 60px;
        padding: 30px;

        .progress-absolute-more {
          text-align: center;
          color: $color-main;
          padding-top: 10px;
          cursor: pointer;
        }

        .class-schedule {
          ul {
            li {
              padding: 0 0 10px 0;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .info-number {
                color: #6b6b6b;
              }

              .progress-number {
                width: 300px;
                display: flex;
                align-items: center;
                // color: #6b6b6b;
              }

              .el-progress {
                width: 210px;
              }

              .color {
                &:hover {
                  color: $color-second-2;
                }
              }
            }
          }
        }
      }

      &:hover {
        .progress-absolute {
          display: block;
        }
      }
    }
  }

  .study-conatiner {
    // padding: 20px;
    // height: 680px;
    box-sizing: border-box;
    padding-bottom: 20px;
    overflow: hidden;

    .study-item {
      background: #ffffff;
      padding: 20px;
      border-radius: 12px;
      box-sizing: border-box;
      position: relative;

      .study-item-header {
        font-size: 20px;
        font-weight: bold;
        color: #363636;
        box-sizing: border-box;
        padding: 0px 0 10px 0;

        .header-right {
          font-size: 14px;
          font-weight: normal;
          color: $color-main;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }

    .intelligent-study {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .intelligent-study-container {
      //   flex: 1;
      // height: 95%;
      min-height: 400px;
      max-height: 600px;

      .intelligent-study-item {
        background: #f7f7f7;
        border: 1px solid #f7f7f7;
        border-radius: 8px;

        .intelligent-item-header {
          font-size: 12px;
          border-bottom: 1px solid #e5e5e5;
          padding: 5px 0 10px 0;

          // background: red;
          img {
            width: 16px;
            height: 16px;
          }

          .btn {
            color: #363636;
            margin-right: 16px;

            &:hover {
              // opacity: 0.8;
              color: $color-second-2;
            }
          }

          // .black-orange {
          //   color: #363636;
          //   &:hover {
          //     color: $color-second-2;
          //   }
          // }
        }
      }

      .intelligent-study-left {
        width: 200px;

        .intelligent-study-unit {
          height: 100%;
          position: relative;
        }

        // overflow: hidden;
        .study-unit {
          left: 0;
          right: 0;
          top: 47px;
          bottom: 0;
          position: absolute;
          // padding: 20px 0px;
        }

        .scorll-box {
          padding-right: 10px;
          height: 100%;
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 6px;
          }

          &::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 2px;
          }

          &::-webkit-scrollbar-thumb {
            background: #eee;
            border-radius: 10px;
          }
        }

        .study-unit-list {
          li {
            cursor: pointer;
            height: 80px;
            box-sizing: border-box;
            border-radius: 8px;
            padding: 10px;

            &:hover {
              background: #fff;
            }

            &.checked-unit {
              background: #fff;
              border: 1px solid $color-main;
              background: $color-second-3;

              h5 {
                color: #363636;
              }
            }

            h5 {
              font-size: 15px;
              font-weight: bold;
              color: #949494;
              line-height: 40px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
      }

      .intelligent-study-right {
        flex: 1;

        .intelligent-right-conatin {
          padding: 10px 0;
        }
      }

      .study-cotainer {
        padding: 10px;
        border-radius: 5px;
        box-sizing: border-box;
        overflow: hidden;
      }

      .icon-caret-bottom {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ddd;
        position: relative;
        margin: 35px 0;

        &::after {
          content: "";
          position: absolute;
          display: block;
          width: 19px;
          height: 13px;
          background-image: url(../img//icon//icon-caret-bottom-hb.png);
          background-size: 100% 100%;
          left: 50%;
          top: -3px;
          margin-left: -10px;
        }
      }

      .word-study-item {
        display: flex;
      }

      .word-study,
      .example-study {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-caret {
        width: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .study-item {
        width: 120px;
        height: 300px;
        text-align: center;
        background-color: #fff;
        border-radius: 12px;

        // cursor: pointer;
        .el-progress__text {
          font-size: 16px;
        }
      }

      .el-progress.red-text {
        .el-progress__text {
          color: $color-error-1;
        }
      }

      .el-progress.green-text {
        .el-progress__text {
          color: $color-main;
        }
      }

      .example-study .study-item {
        height: 110px;
      }

      .big-study-item {
        width: 230px;
      }

      .example-study .study-item {
        background: #e5e5e5;
        color: #969696;
        text-align: left;
        line-height: 30px;
      }
    }

    .word-study .study-border {
      border: 1px solid $color-main;
      background: $color-second-3;
    }

    .word-study .study-item {
      &:hover {
        @include common-main-shadow;
      }

      .study-item-progress {
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;

        .challenge {
          background-size: contain;
          background-repeat: no-repeat;
        }

        .challenge-quick {
          background-image: url(../img/study-quick.png);
        }

        .challenge-ultimate {
          background-image: url(../img/study-ultimate.png);
        }

        .challenge-right {
          background-color: $color-main;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .study-item-name {
        font-size: 30px;
        font-weight: 400;
        color: #363636;
      }

      .study-item-notice {
        font-size: 12px;
        font-weight: 400;
        color: #6b6b6b;
        line-height: 30px;
      }

      .study-item-again {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .intelligent-review {
      padding: 20px;
      width: 200px;
      display: flex;
      flex-direction: column;
    }

    .intelligent-review-container {
      width: 100%;
      flex: 1;
      border-radius: 8px;
      background: #f7f7f7;
      padding: 20px;

      ul {
        padding: 20px 5px;

        li {
          padding: 5px 0;

          &:hover {
            color: $color-second-2;
          }
        }

        .checked-item {
          color: $color-second-2;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 6px;
            display: block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: $color-second-2;
          }
        }
      }
    }

    .btn-box {
      margin-top: 20px;

      .button {
        width: 100%;

        &:hover {
          background-color: $color-main;
          color: #fff;
        }
      }
    }
  }

  .mode-item {
    h4 {
      display: flex;
      align-items: center;
      padding: 10px 0;

      .number {
        width: 16px;
        height: 16px;
        background: $color-main;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 16px;
        font-size: 12px;
        margin-right: 10px;
      }

      .title {
        margin-right: 5px;
      }
    }

    p {
      font-size: 14px;
      color: #949494;
      margin-bottom: 5px;
    }
  }
}

.mode-list-info {
  .mode-item {
    h4 {
      display: flex;
      align-items: center;
      padding: 10px 0;

      .number {
        width: 16px;
        height: 16px;
        background: $color-main;
        border-radius: 50%;
        color: #fff;
        text-align: center;
        line-height: 16px;
        font-size: 12px;
        margin-right: 10px;
      }

      .title {
        margin-right: 5px;
      }
    }

    p {
      font-size: 14px;
      color: #949494;
      margin-bottom: 5px;
    }
  }
}

.audio-icon {
  cursor: pointer;
}

.study-word {
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 40px 0 30px 0;

  .word-paraphrase {
    font-size: 26px;
    color: #363636;
  }

  .word-name {
    line-height: 40px;
    min-height: 47px;

    span {
      font-size: 50px;
      font-weight: bold;
      color: #e7192d;
      // &:hover {
      //   font-size: 34px;
      //   // opacity: 0.8;
      // }
      // &.strong-name {
      //   font-size: 34px;
      //   // opacity: 0.8;
      // }
    }

    img {
      vertical-align: middle;
    }

    .info-text {
      color: #6b6b6b;
      font-size: 20px;
    }

    i {
      font-size: 20px;
      color: #6b6b6b;
      font-style: normal;

      &:hover {
        font-size: 28px;
        // opacity: 0.8;
      }
    }
  }

  .flex-space-be {
    padding-bottom: 30px;
    min-height: 150px;
  }

  .word-line {
    height: 6px;
    background: #dddddd;
    margin: 10px 0;
  }

  .next-btn {
    cursor: pointer;

    img {
      height: 100%;
      width: 100%;
    }
  }
}

.general-test.container-fixed {
  padding-top: 90px;
}

.test-report {
  padding: 30px 0 30px 0;

  &.general-test {
    padding-top: 90px;
    padding-bottom: 30px;

    .question-type-container .question-list .question .question-radio:hover {
      background: inherit;
    }

    .question-type-container {
      margin-bottom: 0;
    }
  }

  .checked-question {
    background: $color-second-3;
  }

  .arts-paper-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .arts-test-container {
    width: 100%;
  }

  .arts-test-container .arts-paper-grade {
    position: relative;
  }

  .arts-test-container .paper-icon-grade {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 80px;
    top: 80px;
    z-index: 99;
    background: none;

    .bg-score {
      background: rgba(0, 0, 0, 0);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      transition: all 0.5s;
    }

    img {
      transition: all 2s;
      width: 120px;
      z-index: 999;
    }
  }

  .arts-test-container .big-positon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .bg-score {
      background: rgba(0, 0, 0, 0.5);
      // background: rgba(0, 0, 0, 1);
    }

    img {
      width: 326px;
    }
  }

  .arts-test-container .question-container {
    background: #fff;
    overflow: hidden;
    /* padding-bottom: 140px; */
  }

  .arts-test-container .question-container .question-list .question-arts {
    border: none;
    box-shadow: none;
  }

  .arts-test-container .question-container .question-list .question-arts .true-answer .el-radio-button__inner {
    border: 1px solid #ffae10;
    color: #ffae10;
    word-break: normal;
  }

  .arts-test-container .question-container .question-list {
    border-top: 1px solid #e5e5e5;
    background: #fffcf7;
  }

  .arts-test-container .question-container .question-list .question-arts {
    background: transparent;
  }

  .arts-test-container .question-container .question-answer .question-arts {
    background: #fafafa;
  }

  .arts-test-container .question-container .question-list .question-arts .el-radio-button__inner {
    background: transparent;
    border-radius: 0;
  }

  .arts-test-container .question-container .question-type {
    margin: 10px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
  }

  .arts-test-container .question-container .question-hearder {
    color: #333333;
    font-weight: 500;
    height: 40px;
    background: #f5f5f5;
    padding-left: 20px;
    line-height: 40px;
  }

  .arts-test-container {
    .btn-box {
      display: flex;
      justify-content: space-between;
      padding: 10px 10px;
    }

    .question-container .btn-box {
      padding: 10px 20px;
    }
  }

  .arts-test-container .btn-box .right-number {
    color: #ffae10;
    margin-right: 5px;
  }

  .arts-test-container .btn-box .wrong-number {
    color: $color-error-1;
    margin-right: 5px;
  }

  .arts-test-container .btn-box .all-btn.el-button {
    background: #ffae10;
    border-radius: 4px;
    color: #ffffff;
    border: none;
  }

  .arts-test-container .btn-box .wrong-btn.el-button {
    color: #ffae10;
    background: #fff3de;
    border: 1px solid #ffae10;
  }

  .arts-test-container .btn-box .el-button {
    background: $color-main;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
  }

  .arts-test-container .test-score {
    // width: 100%;
    width: 1200px;
    height: 491px;
    background: url(../img/bg-score-success.png) no-repeat;
    background-size: 100% auto;
    // background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    // margin-top: 40px;
  }

  .arts-test-container .test-score .test-add-i {
    position: absolute;
    right: 40px;
    top: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    // flex-direction: column;
    // background: url(../img/bg-i-success.png) no-repeat;
    background-size: contain;
  }

  .arts-test-container .test-score .test-add-i .add-i-number {
    /* display: block; */
    font-size: 12px;
    font-weight: 500;
    color: #c27e2a;
    flex: 1;
    text-align: center;
    line-height: 30px;
  }

  .arts-test-container .test-score .test-add-i .add-i-text {
    width: 50px;
    height: 30px;
    line-height: 15px;
    background: #f96218;
    border-radius: 16px;
    color: #fff;
    text-align: center;
    font-size: 12px;
  }

  .arts-test-container .test-bg-score {
    width: 560px;
    height: 164px;
    background: url(../img/bg-s-success.png) no-repeat;
    font-weight: 500;
    color: #f96218;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    position: relative;
  }

  .arts-test-container .test-text {
    font-size: 18px;
    font-weight: 400;
    color: $color-main;
    text-align: center;
    padding: 10px 0;
  }

  .arts-test-container .test-score-title {
    position: absolute;
    left: 528px;
    top: 16px;
    font-size: 36px;
    font-weight: 600;
    color: #ffffff;
  }

  .btn-box-fixed {
    position: fixed;
    bottom: 0px;
    background: #f8f8f8;
    width: 1200px;
    box-shadow: 0px -9px 9px 0px rgba(0, 0, 0, 0.05);
  }

  .arts-test-container .score-nopass {
    width: 1200px;
    background: url(../img/bg-score-no-pass.png) no-repeat;
    background-size: 100% auto;
  }

  .arts-test-container .score-nopass .test-bg-score {
    background: url(../img/bg-s-no-pass.png) no-repeat;
  }

  .arts-test-container .score-nopass .test-score-title {
    color: #666666;
  }

  .arts-test-container .score-nopass .test-text {
    color: #666666;
  }

  .arts-test-container .score-nopass .test-bg-score {
    color: #929292;
  }

  .arts-test-container .score-pass {
    background: url(../img/bg-score-pass.png) no-repeat;
  }

  .arts-test-container .score-pass .test-bg-score {
    background: url(../img/bg-s-pass.png) no-repeat;
  }

  .arts-test-container .score-pass .test-score-title {
    color: #c27e2a;
  }

  .arts-test-container .score-pass .test-text {
    color: #c27e2a;
  }

  .arts-test-container .score-pass .test-bg-score {
    color: #ff7920;
  }

  .first-test {
    .test-score {
      height: 451px;
      background: url(../img/bg-score-first.png) no-repeat;
    }

    .test-score-info {
      width: 100%;
      padding: 60px 170px 20px 170px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;

      .test-bg-score {
        width: 200px;
        height: 180px;
        background-size: 100% 100%;
        font-size: 40px;
        display: flex;
        flex-direction: column;

        p {
          font-size: 16px;
          font-weight: 400;
          color: #6b6b6b;
        }
      }

      ul {
        padding: 0 20px;
        flex: 1;
        display: flex;

        justify-content: space-between;

        li {
          text-align: center;

          .bg-progess {
            width: 48px;
            height: 148px;
            background: #e5e5e5;
            display: flex;
            align-items: flex-end;
          }

          .color-progess {
            width: 100%;
            height: 30%;
            background: $color-second-2;
          }
        }
      }

      .test-speed {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;

        .bg-progess {
          width: 36px;
          height: 125px;
          background: linear-gradient(0deg, #ffa311, #ff5a11);
          position: relative;

          .postion-item {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: block;
            padding: 0;

            .color-item {
              width: 100%;
              height: 5px;
              background-color: #fff;
              margin-top: 8px;
            }
          }
        }

        .color-progess {
          height: 30%;
          background-color: #e5e5e5;
        }
      }
    }
  }
}

.home-study-index {
  // background: url("../img/bg-home.jpg") no-repeat 100%;
  // background-position: top center;
  // background-size: 100%;

  background: url(../img/study-index-bg.png) no-repeat, #fff;
  background-position: top 99px center;
  display: flex;
  justify-content: center;

  .scale-content {
    .item-disable {
      background: linear-gradient(90deg, #e8e8e8, #cbcbcb) !important;
      cursor: not-allowed !important;
    }

    .item1 {
      // background-color: #f3f3f3 !important;
      background-color: #fff6f0 !important;
    }

    .item {
      cursor: pointer;
    }

    // background: #fff;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // transform: scale(0.9);
    // transform-origin: 50% 0;
    .home-content-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;

      .home-content-top-left {
        display: flex;
        align-items: center;

        .item {
          display: flex;
          align-items: center;
          color: #FFFFFF;
          font-family: Microsoft YaHei;
          font-weight: 400;

          .title {
            font-size: 16px;
            margin-right: 16px;
          }

          .lable {
            font-size: 14px;
            margin-right: 14px;
          }

          .value {
            min-width: 67px;
            font-size: 24px;
            font-weight: bold;
          }
        }
      }

      .home-content-top-right {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #FFFFFF;
      }
    }

    .home-content-center {
      display: flex;
      margin-bottom: 20px;

      .first {

        // margin-right: 26px;
        // div:nth-child(2){
        //   background-color: #F3F3F3;
        // }
        div:nth-child(3) {
          // background-color: #fff;
          border-radius: 0 0 0 40px;
        }

        .item {
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 230px;
          height: 150px;
          background: #FFFFFF;
          // border-radius: 10px;
          // margin-bottom: 22px;



          .icon {
            width: 96px;
            height: 96px;
          }

          .title {
            line-height: 26px;
            margin-top: -2px;
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
        }
      }

      .second {
        width: 230px;
        height: 450px;
        // background-color: red;
        background: url(../img/study-index/second-bg.png);
        background-size: 100% 100%;
        // border-radius: 20px;
        // margin-right: 27px;

        .item {
          height: 100%;
          // border-radius: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 276px;

          .icon {
            width: 96px;
            height: 96px;
          }

          .title {
            line-height: 26px;
            margin-top: 12px;
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
        }
      }

      .third {

        // margin-right: 26px;

        .item {
          // margin-bottom: 25px;
          width: 230px;
          height: 225px;
          background: #FFFFFF;
          // border-radius: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 37px;

          .icon {
            width: 96px;
            height: 96px;
          }

          .title {
            line-height: 26px;
            margin-top: 5px;
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }

          .top {
            margin-top: 10px;
          }
        }

      }

      .four {
        .four-top {
          .item {
            width: 508px;
            height: 225px;
            // background: #FFFFFF;
            background: linear-gradient(88deg, #FFF6F0 0%, #FFFFFF 100%);
            border-radius: 0px 40px 0px 0;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
              width: 96px;
              height: 96px;
            }

            .title {
              margin-right: 86px;
              line-height: 26px;
              font-size: 26px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #000000;
            }
          }
        }

        .four-bottom {
          // margin-top: 25px;
          display: flex;
          // justify-content: space-between;

          .item {
            width: 254px;
            height: 225px;
            background: #FFFFFF;
            // border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 37px;

            .icon {
              width: 96px;
              height: 96px;
            }

            .title {
              line-height: 26px;
              margin-top: 5px;
              font-size: 26px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #000000;
            }
          }
        }
      }
    }

    .zh-home-content-center {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .zh-home-content-center-tabs {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding-top: 36px;
        padding-bottom: 46px;
        width: 301px;
        height: 468px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 40px;

        .zh-home-content-center-tab {
          cursor: pointer;
          text-align: center;
          line-height: 79px;
          width: 240px;
          height: 79px;
          background: #EBEDFF;
          border-radius: 11px;
          font-weight: 400;
          font-size: 26px;
          color: #000000;
        }

        .tab-active {
          background: linear-gradient(180deg, #FEC94C 0%, #FFAB26 100%);
          color: #FFFFFF;
        }
      }

      .tab-content-box {
        width: 891px;
        height: 468px;
        background: #FFFFFF;
        overflow: hidden;
        border-radius: 0px 40px 0px 0px;
        font-weight: bold;
        padding-left: 43px;
        padding-right: 42px;
        padding-top: 35px;
        padding-bottom: 33px;

        .no-click{
          cursor: not-allowed;
        }

        .tab-content-first {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .first-item,
          .secend-item {
            padding-top: 303px;
          }
          .first-item{
            background: url(../img/study-index/first-1.png);
            background-size: 100% 100%;
          }
          .secend-item{
            background: url(../img/study-index/first-2.png);
            background-size: 100% 100%;
          }

          .third-item {
            background: none !important;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item-top{
              background: url(../img/study-index/first-3.png);
              background-size: 100% 100%;
            }
            .item-botton{
              background: url(../img/study-index/first-4.png);
              background-size: 100% 100%;
            }
            .item-top,
            .item-botton {
              padding-top: 122px;
              width: 249.2px;
              height: 190.5px;
              // background: pink;
            }
          }

          .item {
            // background: pink;
            width: 249.2px;
            height: 400px;
            text-align: center;
            cursor: default;

            .btn {
              font-size: 24px;
              color: #FFFFFF;
              border: none;
              background-color: rgba($color: #ffffff, $alpha: .39);
              border-radius: 7px;
              width: 154px;
              height: 49px;
            }
          }
        }

        .tab-content-secend {

          display: flex;
          align-items: center;
          justify-content: space-between;
          .first-item{
            background: url(../img/study-index/second-1.png);
            background-size: 100% 100%;
          }
          .secend-item{
            background: url(../img/study-index/second-2.png);
            background-size: 100% 100%;
          }
          .third-item{
            background: url(../img/study-index/second-3.png);
            background-size: 100% 100%;
          }
          .item {
            cursor: default;
            padding-top: 303px;
            // background: pink;
            width: 249.2px;
            height: 400px;
            text-align: center;

            .btn {
              font-size: 24px;
              color: #FFFFFF;
              border: none;
              background-color: rgba($color: #ffffff, $alpha: .39);
              border-radius: 7px;
              width: 154px;
              height: 49px;
            }
          }
        }

        .tab-content-third {
          box-sizing: border-box;
          height: 100%;
          // background-color: pink;
          background: url(../img/study-index/third-1.png);
          background-size: 100% 100%;

          .btn-box {
            padding-top: 110px;
            padding-left: 530px;
            display: flex;
            flex-direction: column;

            .bottom-btn {
              margin-top: 21px;
            }

            .btn {
              // padding-top: 21px;
              font-size: 36px;
              color: #9090D2;
              width: 262px;
              height: 95px;
              border: none;
              background: #FFFFFF;
              box-shadow: inset 0 -0.03125rem 0.02083333rem 0 rgba(122, 122, 211, 0.79);
              border-radius: 48px;
            }
          }
        }
        .tab-content-fourth {
          box-sizing: border-box;
          height: 100%;
          // background-color: pink;
          background: url(../img/study-index/fourth-1.png);
          background-size: 100% 100%;

          .btn-box {
            padding-top: 110px;
            padding-left: 530px;
            display: flex;
            flex-direction: column;
            .btn {
              font-size: 36px;
              color: rgba(237, 109, 25, 1);
              width: 262px;
              height: 95px;
              border: none;
              background: #FFFFFF;
              box-shadow: inset 0 -0.03125rem 0.02083333rem 0 rgba(241, 111, 26, 0.79);
              border-radius: 48px;
            }
          }
        }
      }
    }


    .home-content-botton {
      padding: 0 44px;
      margin-bottom: 20px;
      width: 1200px;
      height: 138px;
      background: rgba(255, 255, 255, 0.47);
      // border-radius: 14px;
      border-radius: 0px 24px 0px 24px;
      display: flex;

      .home-content-botton-left {
        height: 100%;
        display: flex;
        align-items: center;

        .progress {
          width: 114px;
          height: 114px;
          position: relative;

          // .my_progress svg>path:nth-child(2) {
          //   stroke: url(#write);
          // }

          /**
          *由于el-progress的宽高设置为内联,无法转化rem
          *故使用important,但加入后也不能转换rem
          *即直接使用rem赋值
          */
          .my_progress .el-progress-circle {
            height: 0.59375rem !important;
            width: 0.59375rem !important;
          }

          .abs-contain {
            position: absolute;
            top: 53%;
            left: 50%;
            transform: translate(-50%, -60%);
            text-align: center;
            white-space: nowrap;
            font-size: 12px;
            color: #6b6b6b;

            .abs-number {
              font-size: 20px;
              font-weight: bold;
              color: #121111;
            }
          }


        }

        .time {
          padding-left: 11px;
          line-height: 32px;
          font-size: 14px;
        }
      }

      .home-content-botton-right {
        margin-left: 52px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon {
            width: 50px;
            height: 50px;
          }

          .title {
            padding-top: 13px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: black;
            line-height: 16px;
          }
        }
      }
    }
  }
}

.study-index {
  height: fit-content;
  width: 1215px;
  // margin: 0 auto;

  .study-index-top {
    padding: 0 7.5px;
    display: flex;
    justify-content: space-between;

    .user-info {
      box-sizing: border-box;
      padding: 11px 16px;
      width: 287px;
      height: 140px;
      background: url("../img/bg-min.png") no-repeat;
      background-size: 287px 140px;

      .bg-white {
        display: flex;
        padding-left: 20px;
        align-items: center;
        width: 254px;
        height: 118px;
        background: #ffffff;
        border-radius: 8px;

        .el-avatar {
          width: .4166666rem !important;
          height: .4166666rem !important;
          line-height: .4166666rem !important;
        }

        .text {
          padding-left: 12px;

          .user-name {
            padding-bottom: 13px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #121111;
          }

          .all-time {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #4d4d4d;
          }
        }
      }
    }

    .gold-number {
      width: 906px;
      height: 140px;
      margin-left: 7px;
      box-sizing: border-box;
      background: url("../img/bg-mid.png") no-repeat;
      background-size: 906px 140px;
      padding-top: 12px;

      .gold-number-contain {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        width: 872px;
        height: 116px;
        background: #ffffff;
        border-radius: 8px;
      }

      .gold-number-contain li {
        // padding-right: 20px;
        font-size: 18px;
        color: #333333;
        line-height: 30px;
        display: flex;
        align-items: center;

        .text {
          display: inline-block;
          // text-align: right;
        }

        .number {
          margin-right: 38px;
          font-size: 24px;
          font-weight: bold;
          color: #267cff;
          line-height: 68px;
        }
      }
    }
  }

  .study-index-bottom {
    box-sizing: border-box;
    width: 1215px;
    height: 658px;
    padding-top: 50px;
    background: url("../img/bg-max.png") no-repeat;
    background-size: 1215px 658px;

    .study-index-bottom-bg {
      margin-left: 36px;
      padding-left: 30px;
      padding-top: 61px;
      width: 1123px;
      height: 568px;
      background: #ffffff;
      border-radius: 8px;

      .el-tabs__item {
        height: 67px;
        margin-bottom: 28px;
      }

      .el-tabs__active-bar {
        display: none;
      }

      .el-tabs__nav-wrap:after {
        display: none;
      }

      .tabSelect {
        display: inline-block;
        text-align: center;
        line-height: 67px;
        width: 211px;
        height: 67px;
        background: #ebedff;
        box-shadow: inset 0px 0px 16px 0px rgba(170, 197, 254, 0.35);
        border-radius: 11px;
        font-size: 17px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #121111;
      }

      .active {
        color: #fff;
        background: linear-gradient(180deg, #c3d3fd 0%, #84afff 100%);
      }

      .tabSelectRgt {
        border-radius: 8px;
        width: 783px;
        height: 447px;
        background: url("../img/words-bg.png") no-repeat;
        background-size: 783px 447px;

        .detail {
          float: right;
          padding-top: 49px;
          padding-right: 52px;

          .text {
            cursor: pointer;
            margin-top: 20px;
            display: inline-block;
            width: 252px;
            height: 91px;
            background: #ffffff;
            box-shadow: inset 0px -6px 4px 0px rgba(168, 190, 255, 0.79);
            border-radius: 45px;
            text-align: center;
            line-height: 91px;
            font-size: 35px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #8ea8fa;
          }
        }
      }

      .tabSelectRgt-read {
        border-radius: 8px;
        width: 783px;
        height: 447px;
        background: url("../img/read-bg.png") no-repeat;
        background-size: 783px 447px;

        .detail {
          float: right;
          padding-top: 96px;
          padding-right: 52px;

          .text {
            cursor: pointer;
            margin-top: 20px;
            display: inline-block;
            width: 252px;
            height: 91px;
            background: #ffffff;
            box-shadow: inset 0px -6px 4px 0px rgba(108, 221, 193, 0.79);
            border-radius: 45px;
            text-align: center;
            line-height: 91px;
            font-size: 35px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #6cddc1;
          }
        }
      }

      .tabSelectRgt-grammar {
        width: 783px;
        height: 447px;
        border-radius: 8px;
        background: url("../img/grammar-bg.png") no-repeat;
        background-size: 783px 447px;

        .detail {
          float: right;
          padding-top: 158px;
          padding-right: 52px;

          .text {
            cursor: pointer;
            margin-top: 20px;
            display: inline-block;
            width: 252px;
            height: 91px;
            background: #ffffff;
            box-shadow: inset 0px -6px 4px 0px rgba(95, 195, 245, 0.79);
            border-radius: 45px;
            text-align: center;
            line-height: 91px;
            font-size: 35px;
            font-weight: bold;
            color: #5fc2f5;
          }
        }
      }

      .tow-select-item {
        width: 783px;
        height: 447px;
        background: #f5f7ff;
        border-radius: 8px;

        .sync-intent {
          width: 100%;
          padding: 0 47px;
          padding-top: 30px;
          display: flex;
          justify-content: space-between;
        }

        .sync-item {
          padding-top: 176px;
          width: 212px;
          height: 387px;
          background: url("../img/sync-item-01.png") no-repeat;
          background-size: 212px 387px;
          text-align: center;

          .sync-item-img {
            margin: 0 auto;
            width: 79px;
            height: 85px;
            background: url("../img/sync-img-01.png") no-repeat;
            background-size: 79px 85px;
          }

          .sync-item-btn {
            margin-top: 28px;
            display: inline-block;
            width: 162px;
            height: 52px;
            background: linear-gradient(0deg, #0b98f1 0%, #4ec5fc 100%);
            box-shadow: inset 0px 2px 2px 0px rgb(41, 145, 243);
            opacity: 0.76;
            border-radius: 25px;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            line-height: 52px;
            cursor: pointer;
          }
        }

        .sync-item-01 {
          background: url("../img/sync-item-02.png") no-repeat;
          background-size: 212px 387px;

          .sync-item-img-01 {
            background: url("../img/sync-img-02.png") no-repeat;
            background-size: 79px 85px;
          }
        }

        .sync-item-02 {
          background: url("../img/sync-item-03.png") no-repeat;
          background-size: 212px 387px;

          .sync-item-img-02 {
            background: url("../img/sync-img-03.png") no-repeat;
            background-size: 79px 85px;
          }
        }
      }

      .tabSelectRgt-report {
        width: 780px;
        height: 447px;
        padding-top: 28px;
        padding-left: 40px;
        background: #ebedff;
        border-radius: 8px;

        .tabSelectRgt-report-top {
          display: flex;
          align-items: center;
          height: 103px;

          .el-progress-circle__track {
            stroke: #fff;
          }

          .progress {
            background: url("../img/cle-bg.png") no-repeat;
            background-size: 100px 100px;
            width: 100px;
            height: 100px;
            position: relative;

            .my_progress svg>path:nth-child(2) {
              stroke: url(#write);
            }

            /**
            *由于el-progress的宽高设置为内联,无法转化rem
            *故使用important,但加入后也不能转换rem
            *即直接使用rem赋值
            */
            .my_progress .el-progress-circle {
              height: 0.520833rem !important;
              width: 0.520833rem !important;
            }

            .abs-contain {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -60%);
              text-align: center;
              white-space: nowrap;
              font-size: 8px;
              // font-weight: 400;
              color: #6b6b6b;
            }

            .abs-number {
              font-size: 20px;
              font-weight: bold;
              color: #121111;
            }
          }

          .time {
            padding-left: 30px;
            line-height: 32px;
            font-size: 14px;
          }
        }

        .tabSelectRgt-report-bottom-content {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .bottom-content {
            cursor: pointer;
            color: #fff;
            font-size: 16px;
            margin-top: 24px;
            width: 192px;
            height: 116px;
            margin-right: 35px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .bottom-content-img {
              display: inline-block;
              margin-bottom: 14px;
            }
          }

          .content-f {
            background: url("../img/report-bg-01.png") no-repeat;
            background-size: 192px 116px;

            .bottom-content-img {
              width: 37px;
              height: 37px;
              background: url("../img/report-icon-01.png") no-repeat;
              background-size: 37px 37px;
            }
          }

          .content-s {
            background: url("../img/report-bg-02.png") no-repeat;
            background-size: 192px 116px;

            .bottom-content-img {
              width: 28px;
              height: 32px;
              background: url("../img/report-icon-02.png") no-repeat;
              background-size: 28px 32px;
            }
          }

          .content-t {
            background: url("../img/report-bg-03.png") no-repeat;
            background-size: 192px 116px;

            .bottom-content-img {
              width: 39px;
              height: 31px;
              background: url("../img/report-icon-03.png") no-repeat;
              background-size: 39px 31px;
            }
          }

          .content-fourth {
            background: url("../img/report-bg-04.png") no-repeat;
            background-size: 192px 116px;

            .bottom-content-img {
              width: 44px;
              height: 38px;
              background: url("../img/report-icon-04.png") no-repeat;
              background-size: 44px 38px;
            }
          }

          .content-fifth {
            background: url("../img/report-bg-05.png") no-repeat;
            background-size: 192px 116px;

            .bottom-content-img {
              width: 38px;
              height: 38px;
              background: url("../img/report-icon-05.png") no-repeat;
              background-size: 38px 38px;
            }
          }
        }
      }
    }
  }
}

.test-center {
  padding: 30px 0;

  .el-tabs--left,
  .el-tabs--right {
    overflow: visible;
  }

  .el-tabs__header {
    width: 180px;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 30px;
    @include common-main-shadow;
  }

  .el-tabs--left .el-tabs__header.is-left {
    margin-right: 21px;
  }

  .el-tabs--left .el-tabs__nav-scroll {
    height: auto;
  }

  .el-tabs--left.el-tabs--card .el-tabs__nav {
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-radius: 4px;
  }

  .el-tabs__item {
    border: none;
    text-align: center;
    border-radius: 4px;

    &:hover {
      color: $color-main;
    }
  }

  .el-tabs__item.is-active {
    background: $color-main;
    color: #fff;
  }

  .el-tabs--left.el-tabs--card .el-tabs__item.is-left {
    border: none;
    text-align: center;
  }

  .test-container {
    width: 1000px;
    background: #ffffff;
    // box-shadow: 0px 4px 9px 0px rgba(18, 184, 54, 0.1);
    border-radius: 16px;
    padding: 20px;
    clear: both;
    min-height: 700px;

    .test-container-header {
      border-bottom: 1px solid #e5e5e5;
      padding: 0 0 10px 0;
      align-items: center;

      .class-name {
        font-size: 18px;
        font-weight: bold;
        color: #363636;

        .reminder-text {
          color: #949494;
        }
      }

      .score {
        font-size: 18px;
        font-weight: 400;
        color: $color-main;
      }

      .download-btn {
        color: $color-main;
        padding: 5px 10px;
        margin: 0 5px;
        vertical-align: middle;
        border: none;

        &.is-disabled {
          color: $color-neutral-3;
        }

        &:hover {
          background-color: transparent;
          border-color: transparent;
        }

        i {
          vertical-align: middle;
          font-weight: 600;
          font-size: 18px;
        }

        span {
          display: flex;
          align-items: center;
        }
      }
    }

    .test-item {
      padding: 20px 0;

      h4 {
        font-size: 18px;
      }

      .test-btn-item {
        display: flex;

        .el-tooltip {
          padding: 0 10px;
          width: 180px;
          height: 40px;
          line-height: 40px;
          border-radius: 4px;
          border: 1px solid #949494;
          margin-right: 20px;

          .number {
            display: flex;
            align-items: center;

            i {
              color: $color-neutral-3;
              font-size: 18px;
            }
          }
        }

        .green-item {
          padding: 0 10px;
          width: 180px;
          height: 40px;
          line-height: 40px;
          border-radius: 4px;
          border: 1px solid $color-main;
          color: $color-main;
          margin-right: 20px;

          .number {
            display: flex;
            align-items: center;
            color: $color-main;

            i {
              font-size: 18px;
            }
          }
        }
      }
    }
  }

  .info-table {
    .table-cell {
      width: 100%;
      height: 100%;
    }

    .el-table td,
    .el-table th {
      border-right: 1px solid #e5e5e5;
    }

    .audio-play-box {
      overflow: hidden;
    }
  }

  .info-header {
    font-size: 18px;
  }
}

.word-book {
  .word-book-container {
    width: 1000px;
    margin: 30px 0;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    padding: 20px;

    .word-book-header {
      font-size: 20px;
      font-weight: bold;
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;
    }

    .unit-select {
      padding-bottom: 13px;
    }

    .el-table td,
    .el-table th {
      border-right: 1px solid #e5e5e5;
      padding: 0;

      .cell {
        width: 100%;
        height: 100%;

        .cell-box {
          padding: 8px 0;
        }
      }
    }

    .el-table thead {
      th {
        .cell {
          width: 100%;
          height: 100%;
          padding: 8px;
        }
      }
    }

    .word-box {
      width: 100%;
      height: 100%;

      &:hover .hidden-none {
        // display: block;
        opacity: 1;
      }
    }

    .hidden-none {
      // display: none;
      opacity: 0;
    }
  }

  .table-text {
    width: 100%;
    text-align: left;
    display: inline-block;
  }

  .play-click {
    cursor: pointer;
  }

  .diction-training {
    .table-cell-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .play-audio-box {
      border: 1px solid $color-main;
      color: $color-main;
      display: flex;
      align-items: center;
      width: fit-content;
      padding: 0px 8px 0 0;
      // justify-content: center;
      // .paly-audio {
      //   margin-right: 5px;
      //   .img-box-1 {
      //     width: 26px;
      //     height: 26px;
      //     img {
      //       max-width: 100%;
      //       max-height: 100%;
      //     }
      //   }
      // }
    }
  }
}

.word-book-tab {
  position: relative;

  .word-book-container {
    .word-book-tab-header {
      border: none;
      // padding: 0;
      position: absolute;
      line-height: 40px;
    }
  }

  .word-book-container {
    padding: 10px;

    .el-tabs__header {
      border-bottom: 1px solid $color-main;

      .el-tabs__nav {
        float: right;
        margin-bottom: 1px;
      }
    }
  }

  .tab-container {
    padding: 20px 10px 0 10px;
  }

  .el-table thead.is-group th {
    background-color: transparent;
  }
}

.test-record {
  .word-book-container {
    width: 1000px;
    margin: 30px 0;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    padding: 20px;

    .word-book-header {
      font-size: 20px;
      font-weight: bold;
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;
    }

    .unit-select {
      padding-bottom: 13px;
    }
  }

  .table-text {
    width: 100%;
    text-align: left;
    display: inline-block;
  }

  .play-click {
    cursor: pointer;
  }
}

.general-test-box {
  padding: 90px 0;
}

.general-test {
  width: 100%;

  .question-type-container {
    // background: red !important;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 20px;
    // padding: 20px;

    .type-title {
      font-size: 20px;
      padding-bottom: 10px;

      .reminder-text {
        font-size: 14px;
        color: #6b6b6b;
      }
    }

    .question-list {
      display: flex;
      flex-wrap: wrap;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid $color-border-1;

      .question {
        width: 50%;
        background: #fdfbf4;
        padding: 20px 25px;
        border-right: 1px solid $color-border-1;
        border-bottom: 1px solid $color-border-1;

        &:nth-child(even) {
          border-right: none;
        }

        &:nth-child(2n + 1):nth-last-child(-n + 2),
        &:nth-child(2n + 1):nth-last-child(-n + 2)~& {
          border-bottom: none;
        }

        .question-title {
          padding: 0px 0 10px 0px;
          display: flex;
          align-items: baseline;

          >span {
            display: flex;
            align-items: center;
          }

          .baseline {
            display: flex;
            align-items: baseline;
          }
        }

        .question-answer-list {
          padding-bottom: 20px;
        }

        .question-radio {
          //   line-height: 1.5;
          padding: 10px 0px 10px 20px;

          &:hover {
            background: #eeeeee;
          }
        }
      }

      .checked-question {
        background: $color-second-3;
      }

      .question-ing {
        background: #fdf5e7;
      }
    }

    .input-container {
      padding: 0 0px 0px 0px;
    }

    .flex-question {
      display: flex;

      .question-title {
        line-height: 40px;
        // min-width: 20px;
        width: 30px;
      }

      .input-container {
        flex: 1;
      }
    }
  }
}

.question_style {
  width: 100%;

  // height: 100%;
  .no-check {
    color: $color-error-1;
  }

  .question-title {
    overflow: hidden;

    .question-input {
      background: transparent;
      border: none;
      border-bottom: 1px solid;
      min-width: 100px;
      // min-height: 31px;
      display: inline-block;
      vertical-align: baseline;
      white-space: pre;
    }

    span.question-input {
      // vertical-align: bottom;
    }

    .question-input-false {
      color: $color-error-1;
      border-color: #363636;
    }

    .question-input-true {
      color: $color-second-1;
      border-color: #363636;
    }
  }

  .question-answer-list {
    display: flex;
    flex-direction: column;

    .question-radio {
      color: #6b6b6b;

      .el-radio__input.is-checked+.el-radio__label {
        color: #6b6b6b;
      }
    }

    .check-radio-stu {
      .el-radio__inner {
        background: url(../img/icon/false-circle.png);
        border: none;
      }

      .el-radio__input.is-checked .el-radio__inner {
        background: url(../img/icon/false-circle.png);
        border: none;
      }

      .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
        background-color: transparent;
      }

      .el-radio__label {
        color: $color-error-1;
      }

      .el-radio__input.is-checked+.el-radio__label {
        color: $color-error-1;
      }
    }

    .check-radio-true {
      .el-radio__label {
        color: $color-second-1;
      }

      .el-radio__input.is-checked+.el-radio__label {
        color: $color-second-1;
      }

      .el-radio__inner {
        background: url(../img/icon/true-circle.png);
        border: none;
      }

      .el-radio__input.is-checked .el-radio__inner {
        background: url(../img/icon/true-circle.png);
        border: none;
      }
    }
  }

  .click-curse {
    cursor: pointer;
  }

  .true-answer {
    padding: 10px 15px;
  }

  .answer-input {
    display: flex;
    align-items: center;

    .el-input {
      flex: 1;
    }

    .el-input {
      min-width: 400px;
      display: inline-block;
    }
  }

  .checked-answer {
    margin-left: 9px;
    // width: 40px;
  }

  &.question-noanswer {
    .question-answer-list {
      .check-radio-true {
        .el-radio__inner {
          background: $color-second-1;
          border: none;
        }

        .el-radio__label {
          color: $color-second-1;
        }
      }
    }
  }
}

.print-test-box {
  width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  background-color: #fff;

  .print-test-box-radio {
    .el-radio-group {
      display: flex;
    }
  }
}

@media print {
  html {
    font-size: 1920px;
  }

  .question-list-table {
    font-size: 12px;
    line-height: 1.2 !important;
  }
}

.print-test {
  // max-width: 1200px;
  width: 100%;
  background: #fff;
  padding: 0;

  &.general-test {
    font-size: 16px;

    .el-input.is-disabled .el-input__inner {
      border-color: #dcdfe6;
    }

    .test-title {
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      margin: 10px 0;
    }

    .test-name {
      font-size: 16px;
      text-align: center;
      padding: 15px 0;
      line-height: 1;

      .line {
        display: inline-block;
        width: 150px;
        height: 20px;
        border-bottom: 1px solid #363636;
        vertical-align: sub;
      }
    }

    .question-type-container {
      width: 100%;
      background: transparent;
      border-radius: 12px;
      margin-bottom: 20px;
      padding: 0;

      .type-title {
        font-size: 22px;
        padding-bottom: 10px;
        page-break-after: avoid;
      }

      .question-list {
        display: block;
        border-radius: 0;
        // overflow: hidden;
        border: none;

        .question-list-table {
          width: 100%;
          line-height: 1.5;

          .text-word {
            font-size: 18px;
          }

          .question-index {

            word-wrap: none;
            white-space: nowrap;

            .line {
              display: inline-block;
              // width: 200px;
              width: 80%;
              height: 22px;
              border-bottom: 1px solid #363636;
              vertical-align: middle;
            }

            .line-answer {
              min-width: 150px;
              display: inline-block;
              padding: 0 10px;
              border-bottom: 1px solid;
            }
          }

          tr {
            page-break-inside: avoid;
          }

          td:not(.inline-td) {
            padding: 5px 10px;
          }

          .inline-td {
            width: 25%;
            border: none;
          }

          .inline-tr {
            width: 100%;
          }

          .answer-label {
            display: flex;
            align-items: center;
          }

          .check-item-label {
            vertical-align: middle;

            &::after {
              content: "";
              display: inline-block;
              vertical-align: middle;
              height: 100%;
            }
          }
        }
      }

      .input-container {
        padding: 0 0px 0px 0px;
      }

      .flex-question {
        display: flex;

        .question-title {
          line-height: 40px;
          // min-width: 20px;
          width: 30px;
        }

        .input-container {
          flex: 1;
        }
      }
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #fff;
  }

  .el-radio__input.is-disabled+span.el-radio__label {
    color: #363636;
  }
}

.quick-test {
  padding: 30px 0;

  .quick-test-banner {
    width: 100%;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
    align-items: center;
    padding: 0 20px;

    .question-time {
      color: $color-second-2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .question-index-banner {
    position: relative;
    overflow: hidden;
    padding: 0 28px;

    .question-index-btn {
      position: absolute;
      width: 30px;
      text-align: center;
      font-size: 20px;
      line-height: 60px;

      .el-button {
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 20px;
        line-height: 60px;
        color: #363636;

        &:hover {
          background-color: transparent;
          border-color: transparent;
        }
      }

      &.question-index-btn-left {
        left: 0;
      }

      &.question-index-btn-right {
        right: 0;
      }
    }

    .question-index-box {
      position: relative;
      overflow: hidden;
      height: 100%;
    }

    .question-index-container {
      width: fit-content;
      transform: translateX(0px);
      transition: transform 0.3s;
      height: 100%;
      vertical-align: middle;
      display: flex;

      .question-index-type-container {
        display: flex;
        align-self: center;

        .question-index-item {
          display: inline-block;
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #ccc;
          border-radius: 4px;
          margin-right: 8px;

          &:hover {
            border-color: $color-second-2;
            opacity: 0.8;
            color: $color-second-2;
            background-color: #fff;
          }

          &.is-answered {
            border-color: $color-second-2;
            color: $color-second-2;
            background-color: #fff;
          }

          &.is-checked {
            border-color: $color-second-2;
            background-color: $color-second-2;
            color: #fff;
          }
        }
      }
    }
  }

  .el-tabs {

    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      height: 38px;
      line-height: 38px;

      i {
        font-size: 16px;
        color: #363636;
      }

      &.is-disabled {
        i {
          color: #ccc;
        }

        cursor: not-allowed;
      }
    }

    .el-tabs__nav-wrap {
      height: 38px;
    }

    &.el-tabs--card>.el-tabs__header .el-tabs__item {
      width: 40px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      padding: 0;
      margin-right: 8px;
      border-radius: 4px 4px 0px 0px;
      overflow: hidden;

      .question-index {
        &.is-answered {
          background-color: $color-second-2;
          color: #fff;
        }
      }
    }

    &.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
      .question-index {
        background-color: $color-main;
        color: #fff;
      }
    }
  }

  .question-container {
    padding: 30px;
    width: 100%;
    background: #ffffff;
    border-radius: 4px;

    .question-header {
      color: #949494;
      padding-left: 65px;
      position: relative;

      .left-type {
        left: -30px;
        top: -10px;
        position: absolute;
        background: url(../img/number-lt.png) center no-repeat;
        height: 37px;
        line-height: 37px;
        padding: 0 15px;
        color: #fff;
        background-size: 100% 100%;
      }

      .number {
        b {
          color: $color-main;
          font-size: 18px;
        }
      }
    }

    .question-box {
      width: 100%;
      background: #fdfbf4;
      border: 1px solid #eeeeee;
      padding: 14px;

      .question-title {
        font-size: 28px;
        padding: 20px;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
      }

      .question-answer-list {
        padding: 20px 0 20px 40px;

        .question-radio {
          min-height: 40px;
          line-height: 40px;
        }
      }

      .input-container {
        padding: 20px;
        padding-bottom: 50px;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-input {
          width: 800px;

          .el-input__inner {
            height: 60px;
            line-height: 60px;
            font-size: 16px;
          }
        }
      }
    }

    .write-question {
      .question-title {
        text-align: center;
      }
    }

    .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.fixed-header {
  position: fixed;
  top: 0;
  z-index: 999;
}

.fixed-header-shadow {
  position: fixed;
  top: 0;
  z-index: 999;
  // box-shadow: 0px 3px 9px 0px rgba(21, 198, 59, 0.3);
  @include common-main-shadow;
}

.fixed-footer {
  background: #ffffff;
  box-shadow: 0px -3px 10px 0px rgba(126, 126, 126, 0.1);
  position: fixed;
  bottom: 0;
  width: 100%;

  .btn-box {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
  }

  .btn-box .right-number {
    color: #ffae10;
    margin-right: 5px;
  }

  .btn-box .wrong-number {
    color: $color-error-1;
    margin-right: 5px;
  }

  .btn-box .all-btn.el-button {
    background: #ffae10;
    border-radius: 4px;
    color: #ffffff;
    border: none;
  }

  .btn-box .wrong-btn.el-button {
    color: #ffae10;
    background: #fff3de;
    border: 1px solid #ffae10;
  }

  .btn-box .el-button {
    background: $color-main;
    border-radius: 4px;
    padding: 10px 20px;
    color: #fff;
  }
}

.fixed-home-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.memeory-bg {
  display: flex;
  flex-direction: column;
  background: url(../img/bg-memory.png);

  .help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .memory-contain {
    width: 100%;

    &>div:last-child {
      width: 100%;
      padding: 20px 30px;
      display: flex;
      justify-content: space-between;
      color: #fff;
    }
  }

  .memory-container {
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin-bottom: 30px;
  }

  .memory-question {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px;

    &>div:first-child {
      width: 100%;
      min-height: 500px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 12px;
      padding: 20px 30px;
    }

    .question_style {
      padding: 20px;
      padding-left: 0;

      .question-title {
        font-size: 32px;
        font-weight: bold;
        padding: 20px 0;
        border-bottom: 6px solid #ddd;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        position: relative;

        &>span {
          display: flex;
          align-items: center;
        }

        .paly-audio {
          position: absolute;
          right: 0;
        }
      }

      // .question_style .question-answer-list .check-radio-stu .el-radio__input.is-checked .el-radio__inner
      .question-answer-list {
        padding: 20px 20px 20px 0px;

        .check-radio-stu {

          // .el-radio__input.is-checked .el-radio__inner {
          //   background: url(../img/icon/false-circle-b.png);
          // }
          .el-radio__inner {
            background: url(../img/icon/false-circle-b.png);
            border: none;
          }

          .el-radio__input.is-checked .el-radio__inner {
            background: url(../img/icon/false-circle-b.png);
            border: none;
          }
        }

        .check-radio-true {

          // .el-radio__inner .el-radio__inner {
          //   background: url(../img/icon/true-circle-b.png);
          // }
          .el-radio__inner {
            background: url(../img/icon/true-circle-b.png);
            border: none;
          }

          .el-radio__input.is-checked .el-radio__inner {
            background: url(../img/icon/true-circle-b.png);
            border: none;
          }
        }

        .question-radio {
          // min-height: 42px;
          // line-height: 42px;
          padding: 10px 0;
          width: fit-content;

          .el-radio__inner {
            width: 16px;
            height: 16px;
          }

          .el-radio__label {
            font-size: 16px;
          }
        }
      }
    }

    .next-btn-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .memory-header {
    text-align: center;
    font-size: 18px;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 0 20px 0;
    position: relative;

    .reminder-text {
      position: absolute;
      font-size: 14px;
      color: #949494;
      right: 0;
      line-height: 24px;

      .feedback-btn {
        color: #363636;

        &:hover {
          color: $color-main;
        }
      }
    }
  }

  .word-info-img {
    display: flex;
    margin-top: 5px;

    .word-img {
      padding-right: 40px;

      img {
        max-width: 150px;
        max-height: 150px;
      }
    }

    .check-btn {
      width: 83px;
    }

    .img-next {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 83px;
    }
  }

  .word-example {
    display: flex;

    label {
      margin-right: 10px;
      line-height: 25px;
      // width: 50px;
      white-space: nowrap;
    }

    .word-example-list {
      color: #6b6b6b;
      line-height: 25px;
    }

    .more-example {
      cursor: pointer;
    }
  }

  .memory-help {
    .el-dialog__body {
      padding: 40px 30px;
    }

    .key-point {
      display: flex;
      align-items: center;

      label {
        font-size: 16px;
        line-height: 20px;
        font-weight: bold;
        position: relative;
        z-index: 20;

        .line {
          display: inline-block;
          width: 100%;
          height: 6px;
          background-color: $color-second-2;
          position: absolute;
          left: 0;
          bottom: 0px;
          z-index: -1;
        }

        // &::before {
        //   content: "";
        //   width: 100%;
        //   height: 6px;
        //   display: inline-block;
        //   background-color: $color-second-2;
        //   position: absolute;
        //   z-index: 0;
        //   left: -12px;
        //   bottom: 0;
        // }
      }

      .point-info {
        padding: 0 20px;
        line-height: 20px;
        vertical-align: middle;

        &::before {
          content: "";
          width: 8px;
          height: 8px;
          vertical-align: middle;
          border-radius: 50%;
          display: inline-block;
          background-color: #eee;
          margin-right: 5px;
        }

        .red-text {
          color: $color-error-1;
        }
      }
    }
  }
}

.word-example-list {
  color: #6b6b6b;
  line-height: 25px;

  .example-text {
    display: flex;

    .paly-audio {
      vertical-align: middle;
    }
  }
}

.word-listen-bg {
  background: url(../img/bg-word-listen.png);
}

.study-question {
  //   display: flex;
  padding: 30px 0;

  .word-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 60px;
    padding: 20px 0;
    min-height: 100px;
  }

  .title-center {
    display: flex;
    justify-content: center;
  }

  .word-box {
    display: flex;

    .input-word {
      flex: 1;

      .word-nextBtn {
        float: right;
        margin-top: 20px;
        margin-right: 70px;
      }

      .word-nextBtn-sure {
        float: right;
        margin-top: 5px;
        margin-right: 60px;
      }
    }
  }

  .img-box {
    height: 60px;
    display: flex;
    align-items: center;
  }

  .el-input {
    .el-input__inner {
      width: 800px;
      height: 60px;
      line-height: 60px;
      background: #f9fffe;
      border: none;
      font-size: 18px;
    }
  }

  .wordInput {
    .el-input__inner {
      width: 800px;
      height: 60px;
      line-height: 60px;
      background: #f9fffe;
      border: none;
      margin-right: 10px;
      font-size: 18px;
    }
  }

  .word-par {
    font-size: 14px;
    padding: 20px 10px;
    font-size: 18px;
    font-weight: bold;

    .phonetic-info {
      font-size: 18px;
      font-weight: 400;
      color: #6b6b6b;
      line-height: 33px;
    }
  }
}

.progress-course {
  .table-data {
    .header-right {
      display: flex;
      align-items: center;
      justify-content: center;

      .el-progress {
        width: 100px;
      }

      .el-radio-group {
        margin: 0 20px;
        display: flex;

        .el-radio {
          margin-right: 10px;
        }

        .el-radio__input.is-checked .el-radio__inner {
          border-color: $color-main;
          background: $color-main;
        }

        .el-radio__input.is-checked+.el-radio__label {
          color: $color-main;
        }
      }
    }
  }
}

.dictation-bg {
  background: url(../img/bg-dictation.png);
}

.write-bg {
  background: url(../img/bg-write.png);
}

.correct-wrong {
  background: url(../img/bg-correct.png);

  .question-container {
    display: flex;
    flex-direction: column;
  }

  .correct-question {
    flex: 1;
    padding: 20px 50px;

    .wordInput {
      display: flex;
      align-items: center;

      >span {
        flex: 1;
      }

      img {
        height: 25px;
      }
    }

    .word-par {
      font-size: 28px;
      color: #6b6b6b;
    }
  }

  .correct-bottom {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .total-num {
      span {
        font-size: 16px;
        color: $color-main;
      }

      margin-right: 20px;
    }

    .total-pagination {
      display: flex;
      align-items: center;
      // width: 121px;
      height: 36px;
      background: #dddddd;
      border-radius: 18px;
      overflow: hidden;

      .left,
      .right {
        width: 30px;
        height: 36px;
        text-align: center;
        padding: 0;
        background-color: transparent;
        color: #363636;
        border: none;
      }
    }

    .checked-item-box {
      max-width: 61px;
      overflow: hidden;
      position: relative;

      .checked-item {
        position: relative;
        left: 0;
        width: 9999px;
        transition: all 0.5s;

        li {
          display: inline-block;
          width: 30px;
          text-align: center;
          border-left: 1px solid #e5e5e5;
          color: #6b6b6b;

          &:last-child {
            border-right: 1px solid #e5e5e5;
          }
        }

        li.is-checked {
          color: $color-main;
        }
      }
    }
  }
}

.overall-report {
  padding: 30px 0;

  .report-tab-container {
    padding: 20px;
    background: #fff;

    .time-title {
      height: 40px;
      line-height: 40px;
      background: $color-main;
      color: #fff;
      width: fit-content;
      border-radius: 20px;
    }

    .now-time {
      padding: 0 5px;
      text-align: center;
    }

    .pre-icon,
    .next-icon {
      display: inline-block;
      width: 30px;
      text-align: center;
    }

    .el-calendar {
      .el-calendar__header {
        display: none;
      }

      .el-calendar .el-calendar-table tr td:first-child {
        border-left: none;
      }

      .el-calendar .el-calendar-table tr:first-child td {
        border-top: none;
      }

      .el-calendar-table tr:first-child .el-calendar-day {
        border-top: none;
      }

      .el-calendar-table td {
        border-top: none;
        border-right: none;
      }

      .el-calendar-table .el-calendar-day {
        padding: 0;
      }

      .calendar-item {
        border-top: 2px solid #fff;
        width: 100%;
        height: 100%;
        padding: 4px;

        &.is-checked {
          background: #ffceae;
        }

        .calendar-item-box {
          background: transparent;
          border-radius: 5px;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .checked-item {
          border: 2px solid #fff;
        }
      }

      .el-calendar-table .calendar-item {
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
      }
    }

    .el-radio-group {
      .el-radio-button {
        margin-right: 20px;
      }

      .el-radio-button__inner {
        border: 1px solid $color-main;
        border-radius: 18px;
        height: 36px;
        line-height: 36px;
        padding: 0 20px;
        color: $color-main;
      }

      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background: $color-main;
        color: #fff;
      }
    }

    .class-item {
      h4 {
        font-size: 20px;
        font-weight: bold;
        padding: 20px 0;

        .info {
          font-size: 14px;
          font-weight: 400;
          color: #6b6b6b;
          line-height: 33px;
        }
      }
    }

    .class-schedule {
      background: #f5f5f5;
      border-radius: 12px;
      padding: 20px;

      ul {
        li {
          display: flex;
          align-items: center;
          padding: 10px 0;

          .info-number {
            color: #6b6b6b;
          }

          .el-progress {
            width: 220px;

            .el-progress-bar__outer {
              background-color: #ccc;
            }
          }

          .study-schedule {
            flex-wrap: wrap;

            .el-progress {
              width: auto;
            }

            .schedule-icon {
              width: 12px;
              height: 12px;
              margin-right: 6px;
              background-size: 100% 100%;
            }
          }
        }
      }
    }

    #studyInfoMap {
      width: 960px;
      height: 600px;
    }
  }

  .progress-bg {
    display: block;
    background-color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;

    .el-progress-circle {
      width: 0.2084rem !important;
      height: 0.2084rem !important;
    }
  }

  .el-calendar {
    .el-calendar-day {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .el-calendar__button-group {
      display: none;
    }

    .el-calendar__title {
      background: $color-main;
      color: #fff;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      position: relative;

      &::before,
      &::after {
        content: "";
        display: block;
        width: 30px;
        height: 40px;
        position: absolute;
        top: 0;
        background: $color-main;
        font-family: element-icons !important;
        text-align: center;
        font-size: 16px;
      }

      &::before {
        left: -30px;
        border-radius: 50% 0 0 50%;
        content: "\e6de";
        // text-align: right;
      }

      &::after {
        right: -30px;
        border-radius: 0 50% 50% 0;
        content: "\e6e0";
        // text-align: left;
      }
    }
  }

  .day-info {
    h4 {
      font-size: 20px;
      color: #363636;
      padding: 20px 0;
    }

    &>div {
      display: flex;
    }

    .all-type {
      background: $color-second-3;
      border: 1px solid $color-main;
      border-radius: 8px;
      display: flex;
      padding: 20px;

      li {
        display: flex;
        flex-direction: column;
        padding: 10px;
        background: rgba(255, 150, 17, 0.2);
        border-radius: 8px;
        text-align: center;

        .time {
          font-size: 18px;
          font-weight: bold;
          color: $color-second-2;
        }

        .text {
          color: $color-second-2;
        }

        &:last-child {
          background: rgba(20, 114, 255, 0.2);
          // background-color: #d9f5d1;

          .time {
            color: #1472ff;
            // color: $color-second-1; 
          }

          ;

          .text {
            color: #1472ff;
            // color: $color-second-1; 
          }
        }
      }
    }

    .item-type {
      display: flex;
      flex-wrap: wrap;

      li {
        width: 200px;
        display: flex;
        align-items: center;
        padding: 10px;
        background: #f7f7f7;
        border-radius: 8px;
        height: fit-content;
        margin-right: 20px;

        .title {
          display: inline-block;
          vertical-align: middle;
          // padding-right: 10px;
          margin-right: 10px;
          height: 20px;
          border-right: 1px solid #e5e5e5;
          width: 70px;
          text-align: center;
        }
      }
    }
  }
}

#login {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  background-position: bottom center;
  background-size: cover;
  background-image: url("../img/bg-login.png");
  background-color: #637cf7;
  position: relative;

  .textAndLoginBox {
    width: 500px;
    overflow: hidden;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

    .login-box {
      // height: 430px;
      width: 100%;
      padding: 30px 34px 34px;
      background: #fff;
      border-radius: 4px;

      .title {
        text-align: center;
        font-size: 28px;
        padding: 10px 0;
      }

      .login-form {
        padding: 20px 0;

        .el-form-item {
          .el-input__inner {
            height: 60px;
            font-size: 16px;
          }

          .el-input__suffix {
            font-size: 20px;
            line-height: 60px;
          }

          .el-button {
            width: 100%;
            height: 60px;
            font-size: 20px;
            font-weight: normal;
            background: $color-main;
          }
        }
      }
    }
  }

  .text-login {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 35%;
  }

  #nav {
    position: absolute;
    bottom: 24px;
    left: 30%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-around;
    width: 25vh;
    max-width: 25vw;
    height: 5vh;
    max-height: 5vw;
    z-index: 90;
  }

  #nav button {
    width: 5vh;
    font-size: 2.5vh;
    border-radius: 50%;
    transition: 0.4s ease;
    background-color: #ffffff;
    filter: drop-shadow(0 0 10px #909);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #nav button i {
    font-size: 22px;
  }

  #nav button:hover,
  #nav button:active {
    cursor: pointer;
    transform: scale(1.1);
  }

  input {
    font-size: 16px;
  }

  .logo-font {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    flex-direction: column;

    img {
      width: 250px;
    }
  }

  @keyframes rotates {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .login-nav {
    width: 15vh !important;
    right: -60px;
    top: 20px;
    left: auto !important;
  }

  .login-nav>button {
    height: 4vh;
    width: 4vh !important;
  }

  .login-nav>button:last-child {
    color: white !important;
    border-width: 3px;
    animation: rotates 10s linear 0s infinite;
    background: transparent !important;
  }

  .login-nav>button:first-child {
    color: white !important;
    border-width: 3px;
    background: transparent !important;
  }
}

.correct-question {
  .correct-title {
    display: flex;
    align-items: center;
    padding: 20px 0;
    min-height: 80px;

    .word-name {
      font-size: 32px;
      font-weight: bold;
      color: #363636;
      line-height: 1;
    }

    .word-phonetic {
      font-size: 14px;
      font-weight: 400;
      color: #6b6b6b;
      margin-left: 10px;
      margin-right: 10px;
    }
  }

  .correct-contain {
    padding: 10px 0;

    .click-bg {
      width: 500px;
      height: 100px;
      background: #e5e5e5;
      border-radius: 4px;
      text-align: center;
      line-height: 100px;
      cursor: pointer;
    }

    .paraphrase {
      font-size: 24px;
      cursor: pointer;
    }
  }
}

.center-correct {
  .correct-title {
    justify-content: center;
  }

  .correct-contain {
    display: flex;
    justify-content: center;
  }
}

.read-center {
  .read-study-none {
    background: #f7f7f7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-weight: bold;
    font-size: 20px;
  }

  .click-btn-test {
    color: $color-main;
  }

  .study-conatiner .intelligent-study-container {
    height: 500px;
    max-height: 500px;
  }

  .study-conatiner .study-item .study-item-header {
    font-size: 20px;
    font-weight: 400;
    color: #363636;
  }

  .study-conatiner .intelligent-study-container .intelligent-study-left .intelligent-item-header {
    border-bottom: 0;
    padding-top: 0;
  }

  .study-conatiner .intelligent-study-container .intelligent-study-left .study-unit-list li {
    height: 48px;
    line-height: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h5 {
      font-size: 16px;
      font-weight: 400;
      color: #949494;
      line-height: 28px;
    }
  }

  .intelligent-study-left {
    .intelligent-item-header {
      height: 100%;

      .el-tabs {
        position: relative;
        height: 100%;
      }

      .el-tabs__content {
        // height: 100%;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;

        .el-tab-pane {
          height: 100%;
          overflow-y: auto;
          padding-right: 10px;

          &::-webkit-scrollbar {
            width: 6px;
            // height: 10px;
            /**/
          }

          &::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 2px;
          }

          &::-webkit-scrollbar-thumb {
            background: #eee;
            border-radius: 10px;
          }

          ul {
            li {
              .schedule-icon {
                margin: 0;
                // width: ;
              }

              .study-nolearn {
                margin-right: 2px;
              }
            }
          }
        }
      }
    }
  }

  .intelligent-study-right {
    .intelligent-right-conatin {
      height: 100%;

      .word-study {
        height: 100%;
        align-items: center;
        justify-content: center;

        .study-item {
          .study-item-notice {
            color: $color-second-2;
          }

          .study-item-notice.red-color {
            color: $color-error-1;
          }
        }
      }
    }
  }

  .el-tabs {
    width: 100%;

    .el-tabs__item {
      height: 35px;
      line-height: 30px;
    }

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__active-bar {
      background-color: $color-main;
    }

    .el-tabs__item.is-active {
      color: $color-main;
    }

    .el-tabs__item:hover {
      color: $color-main;
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }
}

.set-font-size-box {
  position: absolute;
  left: -60px;
  bottom: 80px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  height: 240px;
  background: #ffffff;
  border-radius: 8px;
  text-align: center;
  padding-top: 20px;
  font-size: 14px;
  line-height: 1.5;

  .title {
    font-size: 16px;
  }

  .number {
    font-size: 14px;
    color: #666666;
  }

  .slider-font-size {

    // padding: 10px 0;
    .el-slider {
      margin: 10px 0 6px 0;

      .el-slider__button {
        border-color: $color-main;
      }

      .el-slider__bar {
        background-color: $color-main;
      }
    }
  }
}

.reading-question {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;

  .reading-article {
    flex: 1;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.5;
    padding: 30px 10px;

    .scorll-box {
      overflow: hidden;
      padding: 0 10px;
      height: 100%;
      overflow-y: auto;
      overflow-x: auto;

      // white-space: normal;
      // word-wrap: normal;
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        // height: 10px;
        /**/
      }

      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 2px;
      }

      &::-webkit-scrollbar-thumb {
        background: #eee;
        border-radius: 10px;
      }
    }
  }

  .reading-question-list {
    padding: 30px 10px;
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    border-radius: 12px;

    .scorll-box {
      overflow: hidden;
      padding: 0 10px;
      height: 100%;
      overflow-y: auto;

      /*修改滚动条样式*/
      &::-webkit-scrollbar {
        width: 6px;
        // height: 10px;
        /**/
      }

      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 2px;
      }

      &::-webkit-scrollbar-thumb {
        background: #eee;
        border-radius: 10px;
      }
    }

    .answer-number {
      font-size: 18px;
      padding-bottom: 10px;

      span {
        color: $color-error-1;
      }
    }

    .read_question_style {
      background-color: #faf9f9;
      border-radius: 4px;
      margin-bottom: 20px;
    }

    .bg-griy {
      background-color: #faf9f9;
    }

    .question-title {
      background: $color-second-3;
      font-size: 20px;
      font-weight: 400;
      color: #363636;
      padding: 10px 30px;
      position: relative;
      padding-right: 50px;
      display: flex;

      .number {
        color: #6b6b6b;
        font-size: 16px;
        white-space: nowrap;

        .now-number {
          font-size: 20px;
        }
      }
    }

    .question-answer-list {
      padding: 10px 30px;

      .el-radio-group {
        display: flex;
        flex-direction: column;

        .el-radio {
          font-size: 16px;
          padding-bottom: 8px;
          margin: 0;
        }

        .el-radio,
        .el-radio__input {
          white-space: normal;
        }

        .el-radio__input.is-checked+.el-radio__label {
          color: $color-main;

          .answer-label {
            background: $color-main;
            color: #fff;
            border-color: $color-main;
          }
        }

        .el-radio__inner {
          display: none;
        }

        .el-radio__label {
          display: flex;
          align-items: center;
          padding: 0;
          font-size: 16px;

          .answer-label {
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            color: #6b6b6b;
          }

          .html-style {
            flex: 1;
            overflow: hidden;
          }
        }
      }
    }

    .feedback-btn {
      font-size: 12px;
      position: absolute;
      right: 15px;
      color: #949494;
      top: 15px;

      &:hover {
        color: $color-main;
      }
    }

    .question-parse {
      padding-bottom: 15px;

      .parse-btn {
        padding: 10px 30px 0 30px;
        color: $color-main;
        position: relative;
      }

      .parse-test {
        display: flex;
        padding-top: 20px;

        .parse-label {
          width: 80px;
          height: 32px;
          line-height: 32px;
          overflow: hidden;
          text-align: center;
          // padding: 5px 10px;
          background: $color-main;
          border-radius: 0px 4px 4px 0px;
          color: #fff;
          // height: fit-content;
          margin-right: 20px;
          white-space: nowrap;
        }

        .parse-html-container {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          font-size: 16px;
          flex: 1;
        }

        .parse-html {
          height: fit-content;
          color: #6b6b6b;
        }
      }
    }

    .checked_question_style {
      .el-radio__input.is-disabled+span.el-radio__label {
        color: #363636;
      }

      .bg-false-title {
        background: #ffebea;
        position: relative;

        .title-text {
          &::after {
            content: "\e6db";
            font-family: element-icons;
            color: $color-error-1;
            margin-left: 10px;
            // float: right;
            // position: absolute;
            // right: 45px;
            // top: 13px;
          }
        }
      }

      .bg-true-title {
        // background: #edfff1;
        position: relative;
        padding-right: 40px;

        .title-text {
          &::after {
            content: "\e6da";
            font-family: element-icons;
            color: $color-second-1;
            margin-left: 10px;
            // float: right;
            // position: absolute;
            // right: 15px;
            // top: 15px;
          }
        }
      }

      .question-answer-list .el-radio-group .stu-answer-label .el-radio__label {
        color: $color-error-1;
      }

      .question-answer-list .el-radio-group .stu-answer-label .el-radio__label .answer-label {
        background: $color-error-1;
        border-color: $color-error-1;
      }

      .question-answer-list .el-radio-group .true-answer-label .el-radio__label {
        color: $color-second-1;
      }

      .question-answer-list .el-radio-group .true-answer-label .el-radio__label .answer-label {
        background: $color-second-1;
        border-color: $color-second-1;
        color: #fff;
      }
    }
  }
}

.intelligent-container {
  position: absolute;
  top: 50px;
  bottom: 0px;
  left: 0px;
  width: 100%;

  .intelligent-train {
    padding: 30px 0;
    height: 100%;
    display: flex;
    flex-direction: column;

    .intelligent-train-header {
      height: 80px;
      background: #ffffff;
      border-radius: 12px;
      line-height: 80px;
      text-align: center;
      font-size: 30px;
      font-weight: 400;
      color: #363636;
    }

    .intelligent-train-contain {
      height: 100%;
    }

    .intelligent-train-contain-box {
      flex: 1;
      overflow: hidden;
    }
  }
}

.read-test-list {
  .test-container {
    width: 1200px;
  }

  .click {
    color: $color-main;

    &:hover {
      opacity: 0.8;
    }
  }

  .radio-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.test-data-info {
  .el-dialog {
    width: 1000px;
    position: relative;
    height: 60%;

    .el-dialog__body {
      position: absolute;
      top: 40px;
      bottom: 0;
      overflow: hidden;
      width: 100%;
      padding-top: 14px;

      .reading-question .reading-article {
        padding-top: 20px;
        background: #faf9f9;
      }

      .reading-question .reading-question-list {
        padding-top: 20px;
        background: #faf9f9;

        .bg-griy {
          background-color: #fff;
        }
      }
    }
  }
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: $color-main;
  background: $color-main;
}

.question-type {
  .el-dialog__header {
    text-align: left;
  }
}

.paly-audio {

  //display: inline-block;
  // overflow: hidden;
  .page-audio-dom {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    // overflow: hidden;
  }

  .img-box-1 {
    width: 40px;
    height: 36px;

    img {
      height: 100% !important;
      width: 100% !important;
    }
  }

  .img-box-2 {
    width: 26px;
    height: 26px;

    img {
      height: 100% !important;
      width: 100% !important;
    }
  }

  .img-box-4 {
    width: 40px;
    height: 36px;
    // padding: 3px;

    // img {
    //   height: 100% !important;
    //   width: 100% !important;
    // }
  }

  .audio-controls {
    display: flex;
    align-items: center;
    justify-content: center;

    .audio-progress {
      width: 200px;
      height: 4px;
      margin-left: 10px;

      .progress-bg {
        width: 100%;
        height: 100%;
        background: #eee;
        position: relative;

        .progress-buffer {
          height: 100%;
          background: #ddd;
        }

        .progress-play {
          height: 100%;
          background: $color-main;
          position: absolute;
          z-index: 99;
          top: 0;
          left: 0;
        }
      }
    }

    .audio-time {
      margin-left: 15px;
      color: #949494;
      font-size: 14px;
    }

    .right-audio {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;

      i {
        font-size: 14px;
      }
    }
  }
}

.help-components {
  display: flex;
  flex-direction: column;
  position: relative;

  .container {
    width: 1200px;
    margin: 0 auto;
  }

  .help-container {
    flex: 1;
    display: flex;
  }

  .help-aside {
    width: 270px;
    background: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    height: auto;
    margin: 20px;
    margin-left: 0;
    border-radius: 5px;
    min-height: 500px;

    .el-collapse-item__arrow {
      font-size: 0;
    }

    .el-collapse-item__content {
      padding-bottom: 0;
    }

    .el-collapse-item__header {
      height: 38px;
    }
  }

  .help-aside-logo {
    text-align: center;
    /* padding: 20px 0; */
  }

  .help-aside-logo img {
    height: 100px;
  }

  .help-aside-classif {
    /* background: #eee; */
    cursor: pointer;
    padding: 5px 0 5px 40px;
    border-top: 1px solid #eee;
    text-align: left;
  }

  .help-aside-classif:hover {
    background: $color-main;
    color: #fff;
  }

  .el-collapse-item__header {
    padding-left: 30px;
    position: relative;
    color: #363636;
    font-weight: bold;

    i {
      position: absolute;
      left: 10px;
      font-size: 14px;
      color: $color-main;
      font-weight: 900;
    }
  }

  .el-collapse-item__header.focusing:focus:not(:hover) {
    color: $color-main;
  }

  .help-checked-classif {
    background: $color-main;
    color: #fff;
  }

  .help-main {
    flex: 1;
    background: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
    height: auto;
    margin: 20px;
    margin-right: 0;
    border-radius: 5px;
    text-align: left;

    .search-problem {
      padding: 20px 50px;
    }

    .problem-list {
      padding: 20px;
    }

    .problem-list .el-collapse-item__content {
      padding-left: 40px;
    }

    .el-autocomplete {
      width: 100%;
    }

    .problem-list .el-collapse-item__content img {
      max-width: 100%;
    }
  }

  .el-collapse {
    border: none;
  }

  .help-html p {
    text-indent: 2em;
  }

  .help-html h4 {
    font-weight: 600;
  }
}

.html-style {
  .red_color {
    margin: 0;
  }
}

.feedback-form {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: $color-main;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .faildreson {
    display: flex;
    align-items: start;

    label {
      white-space: nowrap;
    }
  }

  .img-form-itme {
    display: flex;
    flex-direction: column;

    label {
      text-align: left;
    }
  }
}

.audio-record {
  .audio-record-1 {
    .record-btn {
      background: transparent;
      border: none;

      i {
        font-size: 24px;
      }

      &:focus,
      &:hover {
        color: $color-main;
      }
    }
  }

  .audio-record-2 {
    .record-btn {
      background: $color-second-2;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 35px;
      // font-weight: bold;
    }
  }
}

.word-read-score {
  .score-show {
    .scoere-show-item-paraphrase {
      padding: 0 0 10px 0;

      .item-content {
        flex-direction: column;
      }
    }

    .scoere-show-item {
      line-height: 1;
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }

      &::before,
      &::after {
        display: table;
        content: "";
      }

      .stu-score-item {
        padding: 14px 0 0 0;
        // display: flex;
        // justify-content: space-between;
      }

      label {
        text-align: left;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        padding: 0 12px 0 0;
        box-sizing: border-box;
        width: 100px;
      }

      .item-content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // line-height: 1;
        position: relative;
        font-size: 14px;

        .word {
          position: relative;
          font-weight: bold;
          font-size: 32px;
        }

        .paly-audio-word {
          margin-left: 10px;
          // position: absolute;
          // right: 0;
          // .img-box-1 {
          //   width: 26px;
          //   height: 26px;
          //   img {
          //     max-width: 100%;
          //     max-height: 100%;
          //   }
          // }
        }

        .phonetic {
          // font-weight: bold;
          font-size: 30px;
        }

        .table-text {
          font-size: 18px;
          width: fit-content;
          line-height: 24px;
        }

        .score {
          line-height: 50px;

          >span {
            vertical-align: middle;
          }

          .score-num {
            font-size: 30px;
            font-weight: 900;
            line-height: 1;
            margin-bottom: -1px;
          }
        }

        .audio-stu {
          display: flex;
          align-items: center;
          // margin-right: 40px;
          padding-right: 50px;
          overflow: hidden;
          line-height: 40px;

          // max-width: 50%;
          .audio-label {
            vertical-align: middle;
            margin-right: 2px;
            display: flex;
            align-items: center;

            >span {
              display: inline-block;
              max-width: 200px;
              overflow: hidden;
              line-height: 1.2;
              // text-overflow: ellipsis;
              word-break: break-all;
              // white-space: pre-wrap;
            }
          }
        }

        .score {
          padding-left: 50px;
        }

        &::before,
        &::after {
          display: table;
          content: "";
        }
      }

      .item-syllable {
        display: flex;
        align-items: center;
      }

      .phonetic-text-small {
        font-size: 16px;
      }
    }
  }
}

.video-play {
  width: 100%;
  height: fit-content;
  min-height: 158px;
  background: #000;

  &.video-img {
    border-radius: 4px;
    overflow: hidden;
  }

  .no-play {
    position: relative;

    .pv-cover>div {
      display: none;
    }

    .pv-cover>span {
      font-size: 0;
      width: 0;
      height: 0;
    }

    &:hover {
      .video-content {
        background: rgba(0, 0, 0, 0.16);

        img {
          display: block;
        }
      }
    }

    .video-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      background: rgba(0, 0, 0, 0);
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      img {
        display: none;
      }
    }

    .video-time {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 888;
      height: 60px;
      // background-image: linear-gradient(#fff, #000);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 10px 10px;
      background-image: url(../img/bg-controls.png);
      font-size: 14px;
      color: #ffffff;

      &:first-child {
        font-family: DIN;
        font-weight: bold;
      }
    }

    .pv-video-player {
      .pv-progress-wrap {
        display: none;
      }

      .pv-controls {
        display: none;
      }
    }
  }
}

.grammer-video {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 20px 21px 20px;
  margin: 30px auto;

  .study-conatiner {
    padding-bottom: 0;
  }

  &.study-center .study-conatiner .intelligent-study-container .intelligent-study-left .scorll-box {
    padding-right: 5px;
  }

  &.study-center .study-conatiner .intelligent-study-container .intelligent-study-left {
    width: 220px;
  }

  &.study-center .study-conatiner .intelligent-study-container {
    max-height: 600px;
    height: auto;

    .intelligent-item-header {
      border-bottom: 1px solid #e5e5e5;
      padding: 5px 0 10px 0;
      font-size: 16px;
    }
  }

  .first-list {
    .first-list-item {
      &.checked-unit {
        .first-list-item-title {
          background: #ffffff;
        }
      }

      .first-list-item-title {
        height: 48px;
        border-radius: 4px;
        padding: 10px;
        font-size: 18px;
        display: flex;
        align-items: center;
        position: relative;

        &:hover {
          background: #ffffff;
        }

        .video-title-icon {
          transition: transform 0.5s;
          position: absolute;
          right: 10px;

          &.expend-icon {
            transform: rotate(90deg);
          }
        }
      }

      .second-list {
        overflow: hidden;
        padding-left: 20px;
        transition: height 0.5s;

        .second-list-item {
          font-size: 15px;
          padding: 10px 0;

          &.checked-item {
            color: $color-main;
          }
        }
      }
    }
  }

  .header-grammer {
    font-size: 20px;
    padding-bottom: 23px;
  }

  .intelligent-study-left {
    position: relative;
    background: #f7f7f7;
    height: 600px;

    .study-unit {
      padding: 10px 5px 10px 0;

      .scorll-box {
        padding: 0 5px 0 10px;
      }
    }
  }

  .el-main {
    // padding-top: 0;
    padding: 20px;
    padding-top: 15px;
    background: #f7f7f7;
    border: 1px solid #f7f7f7;
    border-radius: 8px;

    .video-type-list {
      position: relative;
      height: 100%;
      padding-bottom: 60px;
      display: flex;
      flex-direction: column;

      .type-title {
        font-size: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 11px;

        .right-btn {
          font-size: 14px;
        }
      }

      .video-container {
        // justify-content: space-between;
        overflow: hidden;
        flex: 1;
        transition: all 0.5s;
        overflow-y: auto;

        .video-container-box {
          display: flex;
          flex-wrap: wrap;
          overflow-y: auto;
        }

        &.video-hidden {
          height: 0;
        }

        .video-list-item {
          margin-right: 10px;
          margin-bottom: 20px;
          width: 282px;
          cursor: pointer;

          &:hover {
            .video-content {
              background: rgba(0, 0, 0, 0.16);

              img {
                display: block;
              }
            }

            .video-title {
              color: $color-main;
            }
          }

          &:nth-child(3n) {
            margin-right: 0;
          }

          .video-play-box {
            width: 100%;
            // height: 142px;
            height: fit-content;
            overflow: hidden;
          }

          .video-title {
            font-size: 16px;
            padding: 10px 0;
          }
        }
      }

      .go-question-btn {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -100px;

        .button {
          i {
            font-size: 15px;
            font-weight: 600;
          }
        }
      }
    }
  }
}

.video-dialog {
  .el-dialog {
    width: 790px;
  }

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 20px;
    position: relative;

    .pv-video-player {
      background: #fff;
    }

    video.pv-video {
      background: #fff;
    }

    .dialog-close {
      position: absolute;
      z-index: 3000;
      right: -10px;
      top: -10px;
      font-size: 29px;
      color: #949494;
      cursor: pointer;
    }

    .video-play {
      min-height: 421px;
    }
  }

  .video-title-dialog {
    font-size: 18px;
    line-height: 1;
    padding-top: 15px;
  }
}

.v-modal {
  opacity: 0.3;
}

.grammar-question-container {
  position: relative;
}

.grammar-question {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  bottom: 0;
  display: flex;

  // justify-content: center;
  .grammar-item {
    height: 100%;
    overflow: hidden;
    background-color: #f7f7f7;

    .reading-question-list {
      padding: 0;
      border-radius: 0;
    }
  }

  .grammar-item-video {
    position: relative;
    padding-right: 14px;
    transition: width 0.5s;

    .grammer-left {
      height: 100%;
      overflow: hidden;
      // padding-right: 10px;
      background-color: #fff;

      .playing-video {
        height: 100%;
        background: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .video-play-box {
          width: 100%;
          flex: 1;
          display: flex;
          align-items: center;
          overflow: hidden;
        }

        .video-list-container {
          // padding: 30px 25px;
          // height: 100%;
          width: 100%;
          height: 200px;
          overflow-x: auto;
          padding: 0 10px;

          .video-container {
            display: flex;
            width: fit-content;

            .video-list-item {
              width: 200px;
              margin-right: 5%;
              margin-bottom: 20px;
              cursor: pointer;

              &:hover {
                .video-content {
                  background: rgba(0, 0, 0, 0.16);

                  img {
                    display: block;
                  }
                }

                .video-title {
                  color: $color-main;
                }
              }

              .video-play {
                min-height: auto;
              }

              .video-title {
                color: #fff;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;

                &.checked-video-title {
                  color: $color-main;
                }
              }
            }
          }
        }

        .back-btn {
          position: absolute;
          right: 20px;
          top: 20px;
        }
      }
    }

    .left-hidden-btn {
      position: absolute;
      top: 50%;
      right: 0px;
      z-index: 999;

      &.open-video {
        transform: rotate(180deg);
      }
    }
  }

  .grammar-item-question {
    transition: all 0.5s;
    margin-left: 0;
    display: flex;
    justify-content: center;

    .question-list-container {
      padding: 30px 20px;
      background-color: #fff;
      height: 100%;
      overflow-y: auto;
      width: 100%;
      max-width: 1200px;
    }

    // &.close-center {
    //   margin-left: 18.75%;
    // }
  }
}

.grammar-question-list {
  .reading-question-list {
    padding: 0;
  }
}

.sentence-write {
  width: 100%;
  height: 100%;
  padding: 40px 80px 30px 80px;

  .sentence-write-top {
    .sentence-write-top-content {
      font-size: 20px;
      padding: 10px 0;
      min-height: 20px;
    }

    .sentence-write-top-input {
      width: 100%;
      display: flex;
      align-items: center;
      position: relative;
      font-size: 20px;

      .input-container {
        flex: 1;

        .el-input {
          .el-input__inner {
            height: 60px;
            line-height: 60px;
            border: none;
            font-size: 18px;
            background: #f9fffe;
          }
        }

        .input-list {
          >span {
            display: inline-block;
            margin-right: 10px;
            padding: 5px 0;

            .el-input {
              width: 137px;

              .el-input__inner {
                height: 45px;
                line-height: 45px;
              }
            }
          }
        }
      }

      .label {
        position: absolute;
        left: -50px;
      }

      .input-checked-answer {
        position: absolute;
        right: -50px;
      }
    }
  }

  .study-line {
    height: 6px;
    background: #ddd;
    margin: 15px 0;
  }

  .sentence-write-bottom {
    .sentence-write-bottom-paraphrase {
      font-size: 18px;
    }
  }
}

.select-sentence {
  width: 100%;
  height: 100%;
  padding: 30px 0 30px 0;

  .select-sentence-top {
    display: flex;
    align-items: center;
    padding: 15px 0;

    .select-sentence-top-left {
      flex: 1;
      font-size: 18px;

      .reminder-text {
        color: #949494;
      }
    }

    .paly-audio {
      width: 80px;
      padding-left: 30px;
    }
  }

  .study-line {
    height: 6px;
    background: #ddd;
    margin: 10px 0;
  }

  .select-sentence-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;

    .select-sentence-bottom-left {
      flex: 1;
      font-size: 24px;

      .el-radio-group {
        width: 100%;
        padding-right: 20px;

        .el-radio {
          margin-bottom: 10px;
          margin-left: 0;
          margin-right: 0;
          padding: 0 24px;
          height: 50px;
          line-height: 50px;
          border-radius: 24px;
          border: 1px solid #dcdfe6;

          .el-radio__label {
            font-size: 14px;
            color: #363636;
          }

          .el-radio__input {
            display: none;
          }

          &.is-checked {
            border-color: #f79714;

            .el-radio__label {
              color: #f79714;
            }
          }

          // $color-main
          // $color-error-1
          &.stu-answer {
            background: $color-error-1;
            border-color: $color-error-1;

            .el-radio__label {
              color: #fff;
            }
          }

          &.true-answer {
            background: $color-second-1;
            border-color: $color-second-1;

            .el-radio__label {
              color: #fff;
            }
          }
        }
      }
    }

    .select-sentence-bottom-right {
      padding: 0 0 0 70px;

      .select-bottom-practice {
        .icon-text {
          width: 80px;
          height: 80px;
          background: #f79714;
          color: #fff;
          font-weight: bold;
          text-align: center;
          line-height: 80px;
          border-radius: 50%;
          font-size: 30px;
        }
      }
    }
  }
}

.study-sentence {
  width: 100%;
  height: 100%;
  padding: 40px 0 30px 0;

  .study-sentence-content {
    font-size: 18px;
  }

  .study-sentence-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;

    .study-sentence-word {
      font-size: 20px;
      line-height: 40px;
      flex: 1;

      .check-word-item:first-child {
        &>span {
          margin-left: 0;
        }
      }

      .word-input {
        display: inline-block;
        height: 36px;
        line-height: 36px;

        margin-right: 5px;
      }

      .false-word {
        padding: 0 8px;
        color: #fff;
        background: $color-error-1;
      }

      .true-word {
        padding: 0 8px;
        background: $color-second-2;
        color: #fff;
      }

      display: flex;

      .delete {
        transform: rotate(180deg);
        margin-left: 10px;
      }
    }

    .paly-audio {
      width: 80px;
      padding-left: 30px;
    }
  }

  .study-line {
    height: 6px;
    background: #ddd;
    margin: 10px 0;
  }

  .study-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;

    .study-bottom-reminder {
      width: 500px;
      height: 200px;
      font-size: 18px;
      font-weight: bold;
      // background: #e5e5e5;
      border-radius: 4px;
      text-align: center;
      line-height: 100px;
    }

    .study-bottom-two {
      width: 100%;
      display: flex;
      min-height: 200px;

      .study-bottom-left {
        flex: 1;

        .paraphrase {
          font-size: 18px;
          padding-bottom: 10px;
        }

        .options {
          display: flex;
          flex-wrap: wrap;

          .options-item {
            height: 36px;
            line-height: 36px;
            padding: 0px 10px;
            border: 1px solid $color-main;
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 4px;

            &.item-hidden {
              opacity: 0;
            }
          }
        }
      }

      .study-bottom-right {
        padding: 0 0 0 70px;

        .study-bottom-practice {
          .icon-text {
            width: 80px;
            height: 80px;
            background: #f79714;
            color: #fff;
            font-weight: bold;
            text-align: center;
            line-height: 80px;
            border-radius: 50%;
            font-size: 30px;
          }
        }
      }
    }
  }
}

.study-center-sentence {
  &.study-center .study-conatiner .intelligent-study-container {
    height: 480px;
    max-height: 480px;
  }

  .intelligent-right-conatin {
    .sentence-study {
      padding: 0 10px;

      .sentence-study-item {
        .sentence-study-item-container {
          background-color: #fff;
          border-radius: 4px;
          padding: 10px 30px;

          .sentence-study-item-content {
            display: flex;
            align-items: center;
            position: relative;

            .el-progress--line {
              display: flex;
              align-items: center;

              .el-progress__text {
                font-size: 0.07552083rem !important;
                white-space: nowrap;
              }
            }

            .item-img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background-color: gray;
              margin-right: 30px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .item-title {
              font-size: 18px;
              font-weight: bold;
              margin-right: 50px;
            }

            .item-progress {
              width: 220px;

              .el-progress-bar {
                padding-right: 60px;
              }

              .el-progress__text {
                margin-left: 10px;
              }
            }

            .study-item-notice {
              color: #949494;
              position: absolute;
              right: 0;
            }
          }
        }

        .icon-caret-bottom {
          margin: 15px 0;
          border-bottom: none;
        }
      }
    }
  }
}

.sentence-test-center {
  .test-container-title {
    font-size: 20px;
    margin-top: 30px;
    font-weight: bold;
  }

  .test-container-info {
    padding: 30px 0 20px 0;
  }

  &.test-center .test-container .test-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    h4 {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
  }
}

.sentence-question {
  .sentence-write {
    padding: 40px 20px 30px 20px;

    .sentence-write-top {
      .sentence-write-bottom-paraphrase {
        font-size: 20px;
        font-weight: bold;
      }
    }

    .sentence-write-bottom {
      display: flex;
      align-items: center;

      .sentence-write-bottom-input {
        flex: 1;
      }

      .study-bottom-right {
        padding: 0 0 0 70px;
      }
    }
  }

  .select-sentence {
    .select-sentence-bottom {
      .el-radio-group {
        flex: 1;
        padding: 20px 0 20px 40px;

        .question-radio {
          min-height: 40px;
          line-height: 40px;

          .el-radio__input.is-checked+.el-radio__label {
            color: $color-main;
          }
        }
      }
    }
  }
}

.sentence-book {
  .tab-container {
    padding-top: 20px;

    .el-table thead.is-group th {
      background: transparent;
    }
  }
}

.sentence-diction-training {
  .unit-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .show-switch {
    display: flex;
    align-items: center;

    .show-btns {
      display: flex;
      align-items: center;

      .btn {
        display: inline-block;
        width: 38px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        border-radius: 50%;
        border: 1px solid $color-main;
        margin-left: 8px;
        color: $color-main;

        &:hover {
          opacity: 0.8;
        }
      }

      .show-btn {
        background-color: $color-main;
        color: #fff;
      }
    }
  }

  .table-text {
    position: relative;
    width: fit-content;
    display: block;
    margin-bottom: 5px;

    .masking-table-row {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      &.masking-show {
        z-index: 99;
        // background: #ccc;
        background: repeating-linear-gradient(-45deg, #ddd, #eee 5px);
      }

      &.masking-hidden {
        z-index: -99;
        background: transparent;
      }
    }
  }
}

.read_question_style {
  .question-title {
    line-height: 1.5;
    vertical-align: baseline;

    .question-input {
      background: transparent;
      border: none;
      border-bottom: 1px solid;
      min-width: 100px;
      display: inline-block;
      white-space: pre;
    }

    .question-input-false {
      color: $color-error-1;
      border-color: #363636;
    }

    .question-input-true {
      color: $color-second-1;
      border-color: #363636;
    }
  }
}

.score-report {
  .el-dialog {
    width: 702px;
    height: 493px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;

    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      position: relative;
      padding: 39px 65px 50px 65px;
      height: 100%;
      overflow: hidden;

      .score-report-container {
        height: 100%;
        display: flex;
        flex-direction: column;

        .score-report-title {
          background-image: url(../img/score-report-top.png);
          background-repeat: no-repeat;
          background-position: center;
          text-align: center;
        }

        .score-report-contain {
          flex: 1;
          background-image: url(../img/score-report-contain.png);
          // background-image: url(../img/bg-logo.png);
          background-repeat: no-repeat;
          background-position: 50% 66%;
          // background-size: 30%;
          padding: 90px 0 30px 0;
          color: #000;
          position: relative;

          p {
            font-size: 14px;
            line-height: 1.5;

            strong {
              font-size: 16px;
              font-weight: bold;
              border-bottom: 1px solid;
            }
          }

          .score-report-name {
            padding: 10px 0;
            line-height: 1;
            padding-bottom: 14px;
          }

          .score-report-score {
            text-indent: 30px;
          }

          .score-report-text {
            text-indent: 30px;
            padding: 10px 0;
          }

          .score-report-contain-inscribe {
            position: absolute;
            right: 4px;
            bottom: 30px;

            p {
              text-align: center;
              line-height: 1;
              padding-bottom: 10px;
            }
          }

          .score-report-contain-level {
            position: absolute;
            // right: 4px;
            left: 50%;
            margin-left: -45px;
            top: 16px;
            width: 90px;

            img {
              width: 90px;
            }
          }
        }

        .score-report-bottom {
          height: 16px;
          background-image: url(../img/score-report-bottom.png);
          background-position: center;
        }
      }

      .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;

        i {
          font-size: 18px;
        }
      }
    }
  }
}

.sentence-test {
  &.quick-test .question-container .question-header {
    padding-left: 80px;
  }

  &.quick-test .question-container .question-header .left-type {
    height: 42px;
    line-height: 42px;
  }

  &.quick-test .question-container .question-box {
    .sentence-write-top {
      padding: 15px 0;
    }
  }

  &.quick-test .question-container .question-box .input-container {
    padding: 0;
  }

  .sentence-question .sentence-write .sentence-write-bottom {
    padding: 50px 0 30px 0;
  }

  &.quick-test .question-container .question-box .input-container .el-input {
    width: 100%;
  }
}

.sentence-test-report {
  &.general-test .question-type-container .question-list .question {
    .question-title {
      align-items: center;
    }
  }
}

.sentence-correct-question {
  &.correct-question .correct-title {
    padding: 30px 0;

    .word-name {
      font-size: 28px;
    }

    &.correct-title-center {
      justify-content: center;
    }
  }

  &.correct-question .word-par {
    font-size: 22px;
  }

  &.correct-question .correct-contain {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.answered-question {

  &.question-type-0,
  &.question-type-1 {
    .question-title {
      align-items: center;
    }
  }

  &.question-type-2,
  &.question-type-3 {
    .question-title {
      font-weight: bold;
      color: #363636;
      font-size: 14px;
    }
  }

  .light-color {
    padding: 5px 0 5px 20px;
    color: #949494;

    .answered-word-item:first-child {
      margin-left: 0;
    }
  }
}

.brower-reminder {
  padding: 15px 50px;
}

.text-study-center {
  $color-text-top-1: #ff9414;
  $color-text-bottom-1: #188aff;

  &.study-center .study-conatiner .intelligent-study {
    margin-right: 0;
  }

  &.study-center .study-conatiner .intelligent-study-container {
    max-height: inherit;
  }

  &.study-center .class-name {
    height: 80px;

    .book-name {
      font-size: 20px;
    }
  }

  &.study-center .study-conatiner .intelligent-study-container .intelligent-study-left {
    width: 240px;

    .study-unit-list li {
      display: flex;
      justify-content: space-between;
      height: auto;

      .study-schedule {
        width: 35px;
      }

      h5 {
        flex: 1;
      }
    }
  }

  .class-name-right {
    .progress-box {
      display: flex;
      justify-content: flex-end;
      padding-right: 50px;

      >div {
        &:hover {
          color: $color-main;
        }

        margin-right: 20px;

        .remind-text {
          color: #949494;
        }
      }
    }
  }

  .text-container {
    .text-study-item {
      padding: 20px 30px;

      .text-study-item-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        padding-left: 20px;
        position: relative;

        &::before {
          content: "";
          display: inline-block;
          width: 4px;
          height: 100%;
          height: 20px;
          background: $color-text-top-1;
          border-radius: 2px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
        }
      }

      .text-study-item-container {
        display: flex;
        padding: 0 20px;

        .text-study-item-left {
          display: flex;
          align-items: center;
          flex: 1;

          .item-progress {
            .el-progress-circle {
              svg>path:first-child {
                stroke: rgba($color: $color-text-top-1, $alpha: 0.2);
              }
            }

            .el-progress__text {
              font-size: 20px;
              color: $color-text-top-1;
              font-weight: bold;
            }
          }

          .item-left-btn {
            width: 180px;
            margin-left: 30px;
            padding: 10px 30px;
            background-image: linear-gradient(to right, #ff8f0b, #ffab40);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            border-radius: 30px;
            color: #fff;

            i {
              margin-left: 10px;
              font-size: 32px;
            }
          }
        }

        .text-study-item-right {
          flex: 1;

          .item-right-btn {
            border: 1px solid #e5e5e5;
            margin: 10px 20px;
            height: 60px;
            line-height: 60px;
            padding: 0 50px;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            vertical-align: middle;
            position: relative;

            .reminder-text {
              color: #949494;
              font-size: 14px;
              margin-left: 10px;
              vertical-align: middle;
            }

            .item-right-btn-icon {
              position: absolute;
              right: 30px;
              top: 50%;
              transform: translateY(-50%);
              display: flex;
              font-weight: bold;
              color: $color-text-top-1;

              i {
                font-size: 32px;
              }
            }
          }
        }
      }
    }

    .text-study-full {
      .text-study-item-title {
        &::before {
          background: $color-text-bottom-1;
        }
      }

      .text-study-item-container {
        .text-study-item-left {
          .item-progress {
            .el-progress-circle {
              svg>path:first-child {
                stroke: rgba($color: $color-text-bottom-1, $alpha: 0.2);
              }
            }

            .el-progress__text {
              color: $color-text-bottom-1;
            }
          }

          .item-left-btn {
            background-image: linear-gradient(to right, #1488ff, #3699ff);
          }
        }

        .text-study-item-right {
          .item-right-btn-icon {
            i {
              color: $color-text-bottom-1;
            }
          }
        }
      }
    }

    .text-study-sentences {
      border-bottom: 1px dashed #e5e5e5;
    }
  }
}

.text-book {
  &.intelligent-container .intelligent-train .intelligent-train-header {
    display: flex;
    font-size: 18px;
    justify-content: space-between;
    padding: 0 30px;
  }

  .sentence-progress {
    margin-left: 15px;
    font-size: 16px;
  }

  .text-book-top {
    .header-left {}

    .header-right {
      display: flex;
      align-items: center;
    }
  }

  .text-book-container {
    line-height: 2;
    font-size: 16px;
    position: relative;
    text-align: justify;

    .set-font-size-box {}
  }
}

.text-book-item {
  background: #fff;
  border-radius: 4px;
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;

  &.text-book-left {
    margin-right: 10px;
  }

  .text-book-container-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 50px;
    border-radius: 4px;
    position: relative;
    font-size: 16px;

    &::before {
      content: "";
      position: absolute;
      left: 20px;
      width: 10px;
      height: 10px;
      background: #fff;
      border-radius: 50%;
      border: 2px solid rgba($color: $color-main, $alpha: 0.5);
    }

    &::after {
      content: "";
      position: absolute;
      right: 20px;
      width: 10px;
      height: 10px;
      background: #fff;
      border-radius: 50%;
      border: 2px solid rgba($color: $color-main, $alpha: 0.5);
    }

    // rgba(20, 114, 255, 1)
    background: linear-gradient(-45deg,
      rgba($color: $color-main, $alpha: 0.3) 0,
      rgba($color: $color-main, $alpha: 0.3) 25%,
      rgba($color: $color-main, $alpha: 0.15) 25%,
      rgba($color: $color-main, $alpha: 0.15) 50%,
      rgba($color: $color-main, $alpha: 0.3) 50%,
      rgba($color: $color-main, $alpha: 0.3) 75%,
      rgba($color: $color-main, $alpha: 0.15) 75%,
      rgba($color: $color-main, $alpha: 0.15));
    background-size: 40px 40px;

    .title {
      font-size: 18px;
      font-weight: bold;
    }

    .switch {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -2px;

      .el-switch.is-checked .el-switch__core::after {
        margin-left: -14px;
      }

      .el-switch {
        height: 16px;
        margin-right: 5px;

        .el-switch__core {
          height: 16px;

          &::after {
            width: 12px;
            height: 12px;
          }
        }
      }
    }
  }

  .text-book-contain {
    background: rgba($color: $color-main, $alpha: 0.05);
    margin-right: 0;
    border-radius: 0;
    flex: 1;
    padding: 10px;
    overflow: hidden;
    font-size: inherit;

    .text-paragraph-list {
      background: #fff;
      border-radius: 4px;
      padding: 20px 10px;
      height: 100%;

      .text-book-paragraph {
        display: flex;
        margin-bottom: 10px;

        &.article {
          display: inline;
        }

        .name {
          width: 110px;
          overflow: hidden;
          font-size: 16px;
          text-align: right;
          vertical-align: middle;
          margin-right: 10px;
          color: #363636;
          text-overflow: ellipsis;
          white-space: nowrap;

          &::after {
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
          }
        }

        .text-content {
          flex: 1;
          width: fit-content;

          &:hover {
            color: $color-main;
          }

          &.play-contain {
            color: $color-main;
          }

          &.paragraph-first {
            // text-indent: 2em;
            padding-left: 2em;
          }

          &.hidden-text {
            background: linear-gradient(-45deg,
                #ddd 0,
                #ddd 25%,
                #eee 25%,
                #eee 50%,
                #ddd 50%,
                #ddd 75%,
                #eee 75%,
                #eee);
            background-size: 8px 8px;
            color: transparent;
          }

          &.hidden-text.play-contain {
            border-bottom: 2px solid $color-main;
          }
        }

        .paragraph {
          .result-read {
            .read-error {
              color: $color-error-1;
            }

            .delete-error {
              color: #949494;
            }

            .standard-right {
              color: $color-main;
            }

            .general-right {
              color: #363636;
            }
          }
        }
      }
    }
  }
}

.grade-read {
  display: flex;
  float: right;
  font-size: 14px;

  >span {
    margin-right: 40px;
    position: relative;

    &::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: -18px;
      transform: translateY(-50%);
    }
  }

  .read-error {
    &::before {
      background: $color-error-1;
    }
  }

  .delete-error {
    &::before {
      background: #949494;
    }
  }

  .standard-right {
    &::before {
      background: $color-main;
    }
  }

  .general-right {
    &::before {
      background: #363636;
    }
  }
}

.text-right-btns {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);

  .right-btn {
    width: 40px;
    text-align: center;
    z-index: 999;
    background: $color-main;
    margin-bottom: 20px;
    color: #fff;
    padding: 10px 0;
    border-radius: 0 8px 8px 0;
    font-weight: bold;

    &:first-child {
      background: $color-second-2;
    }
  }
}

.exercise-read {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .text-book-item.text-book-left {
    margin-right: 0;
  }

  .exercise-read-container {
    height: 100%;
    // overflow: hidden;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    position: relative;

    .container-title {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;

      .remind-text {
        color: #949494;
        line-height: 1;
        vertical-align: middel;

        i {
          color: $color-main;
        }
      }

      .container-box {
        display: flex;
      }

      .progress {
        display: flex;
        align-items: center;

        .el-progress {
          margin-left: 20px;
          margin-right: 20px;
          width: 200px;
        }
      }

      .number {
        span {
          margin-left: 20px;
        }
      }
    }

    .container-text {
      flex: 1;
      background: #fff;
      border-radius: 8px;
      font-size: 16px;
      margin-top: 20px;
      height: 100%;
      overflow: hidden;

      .text-book-container-header {
        text-align: center;
        justify-content: center;
      }

      .text-book-contain {
        .text-book-contain-box {
          height: 100%;
          overflow: hidden;
          overflow: hidden;
          background: #fff;
          border-radius: 4px;
          padding: 10px;
          display: flex;
          flex-direction: column;
        }

        .text-paragraph-list {
          padding: 10px 30px;
          flex: 1;
          overflow-y: auto;

          .text-book-paragraph {
            line-height: 1.5;

            .name {
              padding-top: 10px;
              padding-bottom: 10px;
            }

            .paragraph {
              width: 100%;
              padding: 10px;
              color: #949494;
              position: relative;

              .content {
                margin-bottom: 10px;
                color: #949494;
              }

              .translation {
                margin-bottom: 10px;
              }

              &.play-paragraph {
                color: #363636;
                background: #f5f5f5;
              }

              &.review-paragraph {
                position: relative;
                padding-right: 30px;

                .icon-review {
                  position: absolute;
                  right: 10px;
                  font-size: 18px;

                  i {
                    color: $color-main;
                  }
                }
              }

              .score-info {
                width: 150px;
                overflow: hidden;
                position: absolute;
                right: 10px;
                top: 10px;
              }
            }
          }
        }
      }

      .check-language {
        padding: 10px 0 20px 0;
        display: flex;
        justify-content: space-between;

        .el-radio-group {
          display: flex;

          .el-radio__input.is-checked+.el-radio__label {
            color: $color-main;
          }
        }
      }
    }
  }
}

.score-info-contain {}

.record {
  display: flex;
  align-items: center;
  padding: 20px 20px;

  .right-audio {
    background: $color-main;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
  }

  .audio-record {
    margin: 0 25px;

    .record-btn {
      background: $color-second-2;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      // font-size: 26px;
      // font-weight: bold;
    }
  }

  .stu-audio {
    .score {
      background: $color-main;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;

      i {
        display: none;
      }

      &:hover {
        i {
          display: block;
        }

        span {
          display: none;
        }
      }
    }

    .playing {
      background: $color-main;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
    }
  }
}

.exercise-recite {
  &.exercise-read .exercise-read-container .container-text .text-book-contain .text-paragraph-list .text-book-paragraph .paragraph.play-paragraph {
    background: transparent;
  }

  &.exercise-read .exercise-read-container .container-text .text-book-contain .text-paragraph-list .text-book-paragraph .paragraph {
    width: fit-content;

    .content {
      width: fit-content;
    }

    .translation {
      width: fit-content;
    }
  }

  &.exercise-read .exercise-read-container .container-text .text-book-contain .text-paragraph-list .text-book-paragraph .paragraph.review-paragraph {
    position: initial;
  }

  .paragraph-popover {
    display: block;
    width: 100%;
  }

  .container-text {
    .text-book-contain {
      .check-language {
        .switch {
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: -2px;

          .el-switch.is-checked .el-switch__core::after {
            margin-left: -14px;
          }

          .el-switch {
            height: 16px;
            margin-right: 5px;

            .el-switch__core {
              height: 16px;

              &::after {
                width: 12px;
                height: 12px;
              }
            }
          }
        }
      }

      .text-paragraph-list {
        .text-book-paragraph {
          .paragraph-popover {
            position: relative;
          }

          .paragraph {
            display: inline-block;
            width: auto;

            .content {
              display: inline-block;
              padding: 4px 8px;

              &.hidden-text {
                user-select: none;
                background: linear-gradient(-45deg,
                    #ddd 0,
                    #ddd 25%,
                    #eee 25%,
                    #eee 50%,
                    #ddd 50%,
                    #ddd 75%,
                    #eee 75%,
                    #eee);
                background-size: 8px 8px;
                color: transparent;

                .result-read {
                  color: transparent;

                  >span {
                    color: transparent;
                  }
                }

                // .icon-showE {
                //   color: #949494;
                //   font-size: 20px;
                //   margin-left: 8px;
                // }
              }
            }
          }
        }
      }
    }
  }
}

.audio-student-recite {
  .record {
    display: flex;
    justify-content: center;
    align-items: center;

    .audio-record {
      margin: 0 0px;

      // margin-right: 15px;
      .audio-record-2 {
        .record-btn {
          width: 50px;
          height: 50px;
          font-size: 28px;
        }
      }
    }
  }
}

.text-test-paper {
  &.exercise-read .exercise-read-container .container-text .text-book-contain .text-book-contain-box {
    padding-top: 40px;
    padding-right: 100px;
  }

  &.exercise-read .exercise-read-container .container-text .text-book-contain .text-paragraph-list .text-book-paragraph .paragraph .content {
    margin-bottom: 0;
  }

  &.exercise-read .exercise-read-container .container-text .text-book-contain .text-paragraph-list .text-book-paragraph .paragraph .translation {
    margin-bottom: 0;
  }

  &.exercise-read .exercise-read-container .container-text .text-book-contain .text-paragraph-list .text-book-paragraph .paragraph.answered-paragraph {
    color: $color-main;

    .content {
      color: $color-main;
    }

    .translation {
      color: $color-main;
    }
  }

  &.exercise-read .exercise-read-container .container-text .text-book-contain .text-paragraph-list .text-book-paragraph .paragraph.play-paragraph {
    background: transparent;

    .content {
      color: #363636;
    }
  }

  .text-test-paper-container {
    .text-book-contain {
      .text-book-contain-box {
        position: relative;

        .audio-record {
          position: absolute;
          right: 5px;
          top: 5px;

          .remind-text {
            position: absolute;
            right: 0;
            top: 20px;
            color: #949494;
            font-size: 14px;
            width: 200px;
          }
        }

        .text-paragraph-list {
          .text-book-paragraph {
            .paragraph {
              display: inline-block;
              width: auto;

              .content {
                display: inline-block;

                &.hidden-text {
                  background: linear-gradient(-45deg,
                      #ddd 0,
                      #ddd 25%,
                      #eee 25%,
                      #eee 50%,
                      #ddd 50%,
                      #ddd 75%,
                      #eee 75%,
                      #eee);
                  background-size: 8px 8px;

                  &.content {
                    color: transparent;

                    span {
                      color: transparent;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.text-test-report {
  .arts-paper-grade {
    margin-bottom: 30px;
  }

  .text-book-item.text-book-left {
    margin-right: 0;
  }

  .text-book-item .text-book-contain {
    background: #fff;
    font-size: 16px;
    line-height: 2;
  }

  .text-book-contain-box {
    padding: 10px 10px;

    .check-language {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;

      .grade-read {
        padding-left: 30px;
        float: none;
      }
    }
  }

  .text-book-item .text-book-contain .text-paragraph-list {
    background: rgba($color: $color-main, $alpha: 0.05);
    border: 1px solid #e5e5e5;
    background: $color-second-3;
    color: #949494;
  }

  .text-book-item .text-book-contain .text-paragraph-list .text-book-paragraph .text-content:hover {
    color: inherit;
  }
}

.text-book-header-left.text-book--help {
  padding: 10px;

  p {
    font-size: 14px;
    line-height: 2;
  }
}

.question-practice {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 0;
  display: flex;
  flex-direction: column;

  &.quick-test .question-container .question-header .left-type {
    top: -20px;
  }

  &.quick-test .question-container .question-box .question-title {
    font-size: 16px;
    padding: 0;
    border: none;

    &.bg-false-title {
      .title-text {
        &::after {
          content: "\e6db";
          font-family: element-icons;
          color: $color-error-1;
          margin-left: 10px;
          position: absolute;
          right: 60px;
          top: 80px;
          font-size: 25px;
          font-weight: 900;
        }
      }
    }

    &.bg-true-title {
      padding-right: 40px;

      .title-text {
        &::after {
          content: "\e6da";
          font-family: element-icons;
          color: $color-second-1;
          margin-left: 10px;
          position: absolute;
          right: 60px;
          top: 80px;
          font-size: 25px;
          font-weight: 900;
        }
      }
    }
  }

  &.quick-test .question-container .question-box .question-answer-list {
    padding: 0;
  }

  .quick-test-banner {
    width: 1200px;
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .question-practice-container {
    // height: 100%;
    flex: 1;
    overflow: hidden;

    .question-left {
      flex: 1;
      max-height: 100%;
      overflow: hidden;
      overflow-y: auto;
      @include common-scrollbar;
      position: relative;
      height: 600px;
      display: flex;
      flex-direction: column;

      .question-header {
        height: 30px;
      }

      .feedback-btn {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 14px;
        color: #949494;
      }

      .question-left-container {
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 14px 14px 14px 0;

        .read_question_style {
          .question-title {
            font-size: 18px;
            padding-left: 30px;
            display: flex;
          }

          .question-answer-list {
            padding-left: 40px;

            .el-radio-group {
              .el-radio {
                padding-bottom: 10px;

                .el-radio__label {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  white-space: pre-wrap;
                }

                &.stu-answer-label {
                  .el-radio__inner {
                    background: url(../img/icon/false-circle.png);
                    border: none;
                  }

                  .el-radio__input.is-checked .el-radio__inner {
                    background: url(../img/icon/false-circle.png);
                    border: none;
                  }

                  .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
                    background-color: transparent;
                  }

                  .el-radio__label {
                    color: $color-error-1;
                  }

                  .el-radio__input.is-checked+.el-radio__label {
                    color: $color-error-1;
                  }
                }

                &.true-answer-label {
                  .el-radio__label {
                    color: $color-second-1;
                  }

                  .el-radio__input.is-checked+.el-radio__label {
                    color: $color-second-1;
                  }

                  .el-radio__inner {
                    background: url(../img/icon/true-circle.png);
                    border: none;
                  }

                  .el-radio__input.is-checked .el-radio__inner {
                    background: url(../img/icon/true-circle.png);
                    border: none;
                  }
                }
              }
            }
          }

          .question-parse {
            padding-bottom: 15px;

            .parse-btn {
              padding: 10px 30px 0 30px;
              color: $color-main;
              position: relative;
            }

            .parse-test {
              display: flex;
              padding-top: 20px;

              .parse-label {
                width: 80px;
                height: 32px;
                line-height: 32px;
                overflow: hidden;
                text-align: center;
                // padding: 5px 10px;
                background: $color-main;
                border-radius: 0px 4px 4px 0px;
                color: #fff;
                // height: fit-content;
                margin-right: 20px;
                white-space: nowrap;
              }

              .parse-html-container {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                font-size: 16px;
                flex: 1;
              }

              .parse-html {
                height: fit-content;
                color: #6b6b6b;
              }
            }
          }
        }
      }
    }

    .question-right {
      width: 280px;
      margin-left: 20px;
      background: #fff;
      border-radius: 4px;
      padding: 20px 20px;
      // max-height: 100%;
      display: flex;
      flex-direction: column;
      height: 600px;
      max-height: 100%;

      // overflow-y: auto;
      .question-right-header {
        margin-bottom: 10px;

        h4 {
          font-size: 18px;
          text-align: center;
        }

        p {
          margin-top: 10px;

          span {
            display: inline-block;
            width: 60px;

            // padding-left: 10px;
            &::before {
              content: "";
              width: 8px;
              height: 8px;
              background: #000;
              display: inline-block;
              margin-right: 8px;
              border-radius: 50%;
            }

            &.right {
              &::before {
                background: $color-second-1;
              }
            }

            &.wrong {
              &::before {
                background: $color-error-1;
              }
            }

            &.checked {
              &::before {
                background: $color-main;
              }
            }
          }
        }
      }

      .question-right-container {
        flex: 1;
        overflow-y: auto;

        .list-num {
          display: flex;
          flex-wrap: wrap;

          .list-num-item {
            width: 40px;
            height: 36px;
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            margin-top: 5px;
            margin-right: 5px;
            text-align: center;
            line-height: 36px;
            color: #6b6b6b;

            &.right-item {
              background: $color-second-1;
              color: #fff;
              border: none;
            }

            &.wrong-item {
              background: $color-error-1;
              color: #fff;
              border: none;
            }

            &.answered-item {
              border-color: $color-main;
              color: $color-main;
            }

            &.checked-item {
              background: $color-main;
              color: #fff;
              border: none;
            }
          }
        }
      }
    }
  }
}

.question-test-paper {
  display: flex;
  position: relative;

  &.question-fixed {
    .question-left {
      padding-right: 300px;
    }

    .question-right {
      position: fixed;
      right: 50%;
      transform: translateX(600px);
    }
  }

  .reading-question {
    display: block;
    flex: 1;

    .question-type-container {
      .reading-question-list {
        flex-direction: column;
        padding-top: 10px;

        .question {
          width: 100%;

          .read_question_style {
            border-radius: 0;

            .question-title {
              .title-text {
                display: flex;
                flex: 1;
                justify-content: space-between;

                .html-style {
                  flex: 1;
                }
              }
            }
          }
        }
      }
    }
  }

  .question-right {
    width: 280px;
    margin-left: 20px;
    background: #fff;
    border-radius: 4px;
    padding: 20px 20px;
    // max-height: 100%;
    display: flex;
    flex-direction: column;
    height: 600px;

    .question-right-score {
      padding-bottom: 20px;
      border-bottom: 1px dashed #ccc;

      .score {
        color: $color-second-2;
        text-align: center;
        padding: 10px 0;
        font-size: 16px;
        font-weight: bold;

        span {
          font-size: 48px;
        }
      }

      .info {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .time {
        color: #999;
        padding: 0 0 10px 0;

        span {
          color: $color-main;
          font-weight: bold;

          font-size: 16px;
        }
      }
    }

    .question-right-header {
      margin-bottom: 10px;
      padding-top: 20px;

      h4 {
        font-size: 18px;
        text-align: center;
      }

      p {
        margin-top: 10px;

        span {
          display: inline-block;
          width: 60px;

          // padding-left: 10px;
          &::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #000;
            display: inline-block;
            margin-right: 8px;
            border-radius: 50%;
          }

          &.right {
            &::before {
              background: $color-second-1;
            }
          }

          &.wrong {
            &::before {
              background: $color-error-1;
            }
          }

          &.answered {
            &::before {
              background: $color-second-2;
            }
          }

          &.not-answered {
            &::before {
              background: #fff;
              border: 1px solid #6b6b6b;
            }
          }

          &.checked {
            &::before {
              background: $color-main;
            }
          }
        }
      }
    }

    .question-right-container {
      flex: 1;
      overflow-y: auto;

      .type-title {
        padding-top: 10px;
        font-weight: bold;
      }

      .list-num {
        display: flex;
        flex-wrap: wrap;

        .list-num-item {
          width: 40px;
          height: 36px;
          background: #ffffff;
          border: 1px solid #e5e5e5;
          border-radius: 4px;
          margin-top: 5px;
          margin-right: 5px;
          text-align: center;
          line-height: 36px;
          color: #6b6b6b;

          &.right-item {
            background: $color-second-1;
            color: #fff;
            border: none;
          }

          &.wrong-item {
            background: $color-error-1;
            color: #fff;
            border: none;
          }

          &.answered-item {
            background: $color-second-2;
            color: #fff;
            border: none;
          }

          // &.not-answered-item {
          //   background: #fff;
          //     border: 1px solid #6b6b6b;
          // }
          &.checked-item {
            background: $color-main;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
}

.question-study-center {
  &.text-study-center.study-center .study-conatiner .intelligent-study-container .intelligent-study-left {
    width: 200px;
  }

  &.study-center .class-name .class-name-right {
    .button {
      width: 140px;
    }
  }

  .text-container .text-study-sentences {
    border: none;
  }

  .text-container .text-study-item {
    padding-top: 50px;
  }

  .text-study-item-left {
    .item-progress {
      position: relative;

      .progress-text {
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        &>div {
          font-size: 20px;
          font-weight: bold;
          color: #f1a482;
          padding-bottom: 5px;
        }
      }
    }
  }
}

#app .game-conatiner,
#app .keyboard-game {
  background: url(../img/bg-game.png);
  overflow: hidden;

  .header-left {
    flex: 1;
  }

  .header-center {
    flex: 3;

    .time {
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      margin-right: 30px;
    }

    .lightning-list {
      display: flex;
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;

      .lightning-item {
        margin-right: 5px;
      }
    }
  }

  .header-right {
    flex: 1;
    justify-content: flex-end;

    .close-memeory {
      color: #fff;
      position: absolute;
      z-index: 9999;
    }
  }

  .game-conatiner-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .card-list-coantiner {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;

    .card-list {
      display: flex;
      flex-direction: column;
      max-height: 100%;
      overflow: hidden;

      .card-list-line {
        display: flex;
        // padding-bottom: 20px;
        overflow: hidden;

        // &:last-child {
        //   padding-bottom: 0;
        // }
        .card-list-column {
          overflow: hidden;
          // display: inline-block;
          text-align: center;
          display: flex;

          .card-item {
            overflow: hidden;
            position: relative;
            transform: rotateY(0deg);

            img {
              width: 100%;
            }

            .card-item-front {
              position: absolute;
              z-index: 0;

              .card-item-text {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                color: #6c2e24;
                font-size: 20px;
                padding: 12%;
              }
            }

            .card-item-behand {
              position: relative;
              z-index: 1;
            }

            &.show-front {
              transform: rotateY(180deg);
            }
          }
        }
      }
    }
  }
}

.game-check-dialog {
  .el-dialog {
    background: #0d49a3;
    border-radius: 4px;
    position: relative;
  }

  .el-dialog__header {
    background: #1472ff;
  }

  .el-dialog__body {
    padding-bottom: 0;

    .el-form-item {
      display: flex;
      flex-direction: column;

      .el-form-item__label {
        text-align: left;
        font-size: 19px;
        font-weight: bold;
        color: #fff;
      }

      .el-form-item__content {
        flex: 1;

        .el-radio-group {
          .el-radio {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            padding: 8px 24px;

            .el-radio__input {
              vertical-align: middle;
              height: 20px;

              .el-radio__inner {
                width: 20px;
                height: 20px;
                background-color: transparent;
                border: 2px solid #698cc2;
              }

              &.is-checked {
                .el-radio__inner {
                  border-color: #e5efff;

                  &::after {
                    width: 10px;
                    height: 10px;
                    background: #98c1ff;
                  }
                }
              }
            }

            .el-radio__label {
              vertical-align: middle;
              font-weight: bold;
              color: #ffffff;
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  .el-dialog__footer {
    .dialog-footer {
      text-align: center;

      .button {
        width: 240px;
        height: 40px;
        background: #1472ff;
        border-color: #1472ff;
        font-size: 16px;
      }
    }
  }
}

.game-label-popover {
  color: #ffffff;
  position: absolute;
  right: 10px;
  top: 8px;

  .icon-wenhao {
    font-size: 20px;
    font-weight: bold;
  }
}

.game-label-popover-contain {
  background: #d1dbeb;

  &.el-popper[x-placement^="right"] .popper__arrow::after {
    border-right-color: #d1dbeb;
  }

  &.el-popper[x-placement^="right"] .popper__arrow {
    border-right-color: #d1dbeb;
  }

  h4 {
    font-size: 16px;
    font-weight: 900;
    color: #363636;
    padding-bottom: 5px;

    .text {
      font-weight: normal;
      font-size: 14px;
    }
  }
}

.natural-spell {
  .natural-list {
    .natural-list-item-contain {
      position: relative;
      // background-color: red;
    }

    .natural-list-item-icon {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 47px;
      font-weight: 900;
      color: #949494;
      font-size: 16px;
    }

    .natural-list-item-title {
      font-size: 16px;
    }
  }

  .natural-list1 {
    .natural-list-item-title {
      line-height: 47px;
    }
  }

  .natural-list2 {
    padding-left: 13px;

    .natural-list-item-title {
      line-height: 40px;
    }
  }

  .natural-list3 {
    .natural-list-item {
      border-radius: 4px;
      padding-left: 10px;
    }

    .natural-list-item-checked {
      background: #e7f1ff;
    }

    .natural-list-item-title {
      line-height: 40px;
    }
  }

  .natural-spell-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    .go-spell-btn {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px dashed $color-border-1;
      width: 100%;

      .button {
        width: 100%;
        height: 68px;
        font-size: 24px;
      }

      .button.button-bg-primary.is-disabled {
        background: #ddd;
        border-color: #ddd;
      }
    }
  }
}

.study-center.natural-spell {
  .study-conatiner .intelligent-study-container .intelligent-study-left {
    width: 320px;
    padding: 20px;
  }

  .intelligent-study-left .study-unit {
    margin-left: 20px;
    margin-right: 20px;
  }

  .study-conatiner .intelligent-study-container .intelligent-study-left .study-unit {
    top: 60px;
  }

  .intelligent-study-left .study-unit .scorll-box {
    padding-left: 0;
  }

  .el-main {
    padding-top: 20px;
  }

  .el-main .video-type-list {
    justify-content: flex-start;
  }

  .el-main .video-type-list .type-title {
    width: 100%;
  }

  .study-conatiner .word-study .study-item .study-item-progress .challenge-right {
    background: transparent;
    border-radius: inherit;

  }

  .study-conatiner .intelligent-study-container .study-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    &.study-item-disabled {
      background: #dddddd;

      .study-item-name {
        color: #fff;
      }
    }

  }
}

.spell-study {
  background: url(../img//naturalSpell/bg-spell-study.png);

  &.memeory-bg .memory-contain>div:last-child {
    color: inherit;
    padding: 0;
  }

  .memory-header {
    border-bottom-color: #ccc;
  }

  .spell-study-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    bottom: 0;
    padding: 0;
    margin-bottom: 0;

    .scroll-container {
      width: 100%;
      transition: transform 0.4s ease-in-out;

      .video-play {
        max-height: 480px;
      }
    }

    .memory-contain {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .btn-next {
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 40px;

        .btn-next-test {
          width: 200px;
          height: 54px;
          background: #e7f1ff;
          border: 1px solid #1472ff;
          border-radius: 4px;
          font-size: 16px;
          color: #1472ff;
        }
      }
    }
  }
}

.spell-study-box {
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  .spell-container {
    .spell-contain {
      padding: 20px 0 10px 0;
    }
  }
}

.spell-one-word {
  padding: 10px 0;
  margin-bottom: 20px;

  .spell-title {
    font-size: 20px;
    font-weight: bold;
    // font-family: MicrosoftYaHei-Bold;
  }

  .spell-container {
    overflow: hidden;
    position: relative;

    .el-carousel__arrow {
      font-size: 20px;
      font-weight: bold;
      width: 40px;
      height: 40px;
    }

    .spell-scorll-container {
      display: flex;
      width: fit-content;
      transition: transform 0.4s ease-in-out;

      .one-word-contain {
        width: 920px;
      }
    }
  }

  .one-word-contain {
    margin-top: 50px;
    padding: 0 125px;
    display: flex;
    align-items: flex-start;

    .one-word-contain-left {
      position: relative;

      .contain-word {
        width: 240px;
        height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: rgba($color: #fff, $alpha: 0.5);
        border-radius: 16px;
        overflow: hidden;

        .el-image {
          background: #fff;
        }
      }
    }

    .one-word-contain-right {
      .word-title {
        display: flex;
        align-items: center;
        // font-family: MicrosoftYaHei-Bold;
        font-weight: bold;
        font-size: 50px;
        line-height: 1;
      }

      .word-paraphrase {
        line-height: 1;
        font-size: 26px;
      }

      .word-record {
        display: flex;
        align-items: center;
        font-size: 20px;
        min-height: 128px;

        .word-record-score {
          .word-record-score-detail {
            .score-detail-item {
              margin-top: 5px;

              .score-detail-item-label {
                color: #949494;
                margin-right: 6px;
                font-size: 14px;
              }

              .score-detail-item-content {
                font-size: 18px;
                overflow: hidden;
                word-break: break-all;
              }

              &.score-detail-item-my {
                .score-detail-item-label {
                  display: flex;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }
  }
}

.spell-one-letter {
  .one-word-contain-left {
    .contain-word {
      .letter-text {
        font-size: 200px;
        // line-height: 240px;
      }
    }

    .contain-audio {
      position: absolute;
      right: 16px;
      top: 16px;
    }
  }

  .letter-contain {
    font-size: 20px;
    margin-top: 20px;
  }
}

.spell-listen-test {
  background-color: $color-second-3;

  .listen-test-container {
    .listen-test-title {
      font-size: 20px;
      line-height: 1;
      padding-top: 30px;
      padding-bottom: 20px;
    }

    .listen-test-paper {
      .paper-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px;

        .button {
          width: 200px;
          height: 54px;
          font-size: 16px;
        }
      }
    }

    .listen-test-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .listen-test-list-item {
        width: 32.5%;
        margin-bottom: 10px;

        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
}

.spell-listen-test-item {
  padding: 30px;
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  line-height: 1;

  .item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 45px;
    }

    .score {
      width: 60px;
      height: 60px;
      background: #1472ff;
      border-radius: 50%;
      line-height: 60px;
      text-align: center;
      color: #ffffff;
      font-size: 24px;
    }
  }

  .item-paraphrase {
    font-size: 24px;
    margin-top: 19px;
  }

  .item-contain {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item-contain-left {
      .audio-record .audio-record-2 .record-btn {
        width: 80px;
        height: 80px;
        font-size: 46px;
      }

      .word-record-score-detail {
        overflow: hidden;

        .score-detail-item {
          // margin-top: 10px;
          font-size: 20px;

          .score-detail-item-label {
            font-size: 18px;

            &.label-flex {
              display: flex;
              align-items: center;
            }

            &.label-light {
              color: #6b6b6b;
              font-size: 16px;
            }
          }

          .score-detail-item-content {
            word-break: break-all;
          }
        }
      }
    }

    .item-contain-right {
      margin-left: 10px;

      .el-image {
        border-radius: 8px;
        border: 1px solid #e7f1ff;
      }
    }
  }
}

.spell-test {
  &.quick-test .question-container .question-box .question-answer-list .question-radio {
    min-height: inherit;
    line-height: 1;
  }

  &.question-practice.quick-test .question-container .question-box .question-title {
    font-size: 28px;
  }

  .question-practice-container .question-left {
    padding-top: 16px;
    height: fit-content;

    .question-com {
      .question-left-container {
        padding-right: 0;
        min-height: 328px;
      }

      .question-header {
        height: 37px;
        line-height: 37px;
        margin-bottom: 10px;

        .left-type {
          top: 0;
        }
      }
    }
  }

  .question-right-spell {
    width: 280px;
    margin-left: 20px;

    .question-right {
      width: 100%;
      margin-left: 0;
      margin-bottom: 20px;
      height: 351px;
      padding: 0;
      overflow: hidden;

      .question-right-header {
        padding-top: 20px;
      }

      .question-right-container {
        padding: 0 30px;
      }

      .right-container-note {
        height: 72px;
        box-shadow: 0px -3px 10px 0px rgba(20, 114, 255, 0.1);
        border-radius: 0px 0px 4px 4px;
        padding: 0 30px;
        display: flex;
        align-items: center;

        .note-item {
          display: flex;
          flex-direction: column;
          margin-right: 20px;

          .color {
            width: 24px;
            height: 24px;
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
          }

          .text {
            font-size: 14px;
          }

          &.note-item-checked {
            .color {
              background-color: $color-main;
              border-color: $color-main;
            }
          }

          &.note-item-true {
            .color {
              background-color: $color-second-1;
              border-color: $color-second-1;
            }
          }

          &.note-item-false {
            .color {
              background-color: $color-error-1;
              border-color: $color-error-1;
            }
          }

          &.note-item-answered {
            .color {
              // background-color: $color-main;
              border-color: $color-main;
            }
          }
        }
      }

      .question-right-container .list-num .list-num-item {
        margin-right: 12px;
        margin-top: 12px;
      }
    }

    .right-btn {
      .button {
        width: 100%;
        height: 50px;
        font-size: 16px;
      }
    }
  }
}

.spell-question {
  &.spell-question-blank {
    .spell-question-header {
      border-bottom: none;
    }
  }

  .spell-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px;
    border-bottom: 1px solid #eee;
    font-size: 28px;
    padding: 0px 30px 20px 30px;
    line-height: 1.5;

    .spell-question-title {
      font-size: 28px;

      .question-input {
        width: 50px;
        min-width: inherit;
        border-bottom-width: 2px;

        &.question-input-answered {
          width: fit-content;
          min-width: 50px;
          max-width: 100%;
          overflow: hidden;
          white-space: normal;
          word-break: break-word;
        }
      }

      span.question-input {
        vertical-align: bottom;
      }
    }
  }

  .spell-question-contain {
    line-height: 1;
    padding-bottom: 10px;

    .question-answer-list {
      .question-radio {
        min-height: inherit;
        line-height: 1;
        padding: 10px 60px 8px 60px;
        margin-right: 0;

        &:hover {
          background: #eeeeee;
        }

        .el-radio__label {
          display: flex;
          align-items: center;
          font-size: 18px;
        }
      }
    }

    .question-answer-record {
      padding: 20px 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .word-record-score {
        width: 100%;
        padding-left: 20px;
      }

      .read-voice-my {
        display: flex;
        align-items: center;
        color: #6b6b6b;
        font-size: 16px;
      }

      .record-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
    }

    .spell-question-parse {
      padding: 0 60px;
      padding-top: 20px;

      .question-parse-item {
        display: flex;
        font-size: 18px;
        margin-bottom: 10px;

        .label {
          color: #6b6b6b;
        }
      }
    }
  }

  .word-record {
    display: flex;
    align-items: center;
    font-size: 20px;
    min-height: 128px;

    .word-record-score {
      .word-record-score-detail {
        .score-detail-item {
          margin-top: 5px;

          .score-detail-item-label {
            color: #949494;
            margin-right: 6px;
            font-size: 14px;
          }

          .score-detail-item-content {
            font-size: 18px;
            word-break: break-all;
          }

          &.score-detail-item-my {
            .score-detail-item-label {
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}

/** 键盘游戏 */
@keyframes mymove0 {
  from {}

  to {
    top: 660px;
  }
}

@keyframes mymove1 {
  from {
    top: 140px;
    left: 880px;
  }

  to {
    top: 660px;
    left: 500px;
    // left: 1150px;
  }
}

@keyframes mymove2 {
  from {
    top: 140px;
    left: 880px;
  }

  to {
    top: 660px;
    left: 600px;
  }
}

@keyframes mymove3 {
  from {
    top: 140px;
    left: 880px;
  }

  to {
    top: 660px;
    left: 700px;
  }
}

@keyframes mymove4 {
  from {
    top: 140px;
    left: 880px;
  }

  to {
    top: 660px;
    left: 800px;
  }
}

@keyframes mymove5 {
  from {
    top: 140px;
    left: 880px;
  }

  to {
    top: 660px;
    left: 850px;
  }
}

@keyframes mymove6 {
  from {
    top: 140px;
    left: 880px;
  }

  to {
    top: 660px;
    left: 950px;
  }
}

@keyframes mymove7 {
  from {
    top: 140px;
    left: 880px;
  }

  to {
    top: 660px;
    left: 1000px;
  }
}

#app .keyboard-game {
  background-image: url(../img/keyboardbg.png);
  background-repeat: no-repeat;
  background-size: 1920px 100%;
  overflow: hidden;

  .keyboard-game-item {
    width: 140px;
    position: relative;
    top: 100px;
    left: 880px;
    transform: scale(0.3);

    img {
      width: 100%;
    }
  }

  .keyboard-game-list {
    width: 140px;
    position: absolute;
    top: 140px;
    left: 880px;
    display: inline-block;
    transform: scale(0.8);

    p {
      color: pink;
      position: relative;
      top: -100px;
      box-sizing: border-box;
      padding: 0px 10px;
      text-align: center;
      font-size: 20px;
    }

    img {
      width: 100%;
    }
  }

  [data-index="1"] {
    top: 300px;
    left: 980px;
  }

  [data-index="2"] {
    top: 335px;
    left: 780px;
  }

  .cao {
    top: 140px;
    left: 750px;
  }

  .right-write {
    width: 184px;
    height: 208px;
    background-image: url("../img/keyboardItem.png");
    position: absolute;
    // right: 150px;
    left: 1450px;
    top: 300px;

    p {
      width: 140px;
      margin: 0 auto;
      text-align: center;
      color: #fff;
      font-size: 20px;
      box-sizing: border-box;
      padding-top: 80px;
      overflow: hidden;
    }
  }
}

.keyboard {}